使用getAttribute读取节点的属性值

最新推荐文章于 2024-08-04 16:33:59 发布

清蒸大闸蟹-

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量295

点赞数 3

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_73749341/article/details/139088171

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
<title>使用getAttribute读取节点的属性值</title>
<style type="text/css">
body {margin:Opx auto;
font-size:12px;
line-height:20px;
background-color:cornsilk;}
#1ike{width:70号；
border-radius:10px;
background:url(./images/bg.png)no-repeat left bottom;
background-color:rgb(252,247,247);
padding-top:10px;
padding-left:200px;
margin:10px auto;
border:1px dashed rgb(252,199,199);}
h1{co1or:rgb(0,128,96):
font-size:24px;
margin-top:20px;}
#like button,#fruitpic button (background-color:rgb(0,128,96);
color:#fff;
border:0;
width:150px;
height:30px;
font-size:14px;
margin:10px 10px 20px 20px;}
input {margin-top:5px;}
ul li (list-style:none;
font-size:14px;}
#fruitpic{width:70号；
border-radius:10px;
background-color:rgb(232,250,245);
padding-top:10px;
padding-left:200px;
margin:10px auto;
border:1px dashed rgb(27,167,132);}
img(border:Opx;
margin-left:50px;
border-radius:10px;
</style>
</head>
<body>
<div id="like">
<h1id="1ove">选择你喜欢的水果：</h1>
<u1>
<li><input type="checkbox"/>苹果</li>
<li><input type="checkbox"/>香蕉</li>
<li><input type="checkbox"/>葡萄</li>
<li><input type="checkbox"/>香梨</li>
<li><input type="checkbox"/>西瓜</li>
</u1>

<input type="checkbox"id="check"/>全选

<button id="favourite">显示你喜欢的水果</button>

</div>

<div id="fruitpic">

<img src="images/fruit.jpg"alt="水果图片"id="fruit"/>

<br/>

<button id="show">显示图片路径</button>

<button id="change">改变图片</button:>
</div>

<script>

document.getElementById("check").onclick function ()
var cks document
queryselector("ul")
queryselectorAll("input [type='checkbox']")

for (var i=0;i<cks.length;i++){
if (cks[i].checked){
cks[i].checked false;
else
cks [i].checked true;
}
document.queryselector("#favourite").onclick function ()
var1ike="你喜欢的水果是："：
var cks document
queryselector("ul")
queryselectorAll("input [type='checkbox']");

for (var i=0;i<cks.length;i++){
if (cks[i].checked){

like +="\n"+cks[i].parentNode.innerText;
}
alert(like);
}

document.queryselector("#show").onclick function ()

alert (document.queryselector("#fruit").getAttribute("src"));
}

document.queryselector("#change").onclick function ()

document
queryselector ("#fruit")
.setAttribute ("src","images/grape.jpg");


</script>

</body>
</htm1>