1，以上图片是运行之后的结果；html+css设置的文档本身的样式；
收藏
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head><title>selector和selectorAll用法</title>
<style>
*{
margin:0;
padding:0;
}
div{
text-align:center;
}
div ul{
width:120;;
height:100%;
margin-top:20px;
margin-left:280px;
}
div ul li{
width:110px;
height:200px;
font-size:0.8em;
text-align:center;
}
</style>
</head>
<body>
<div>
<ul style="list-style-type:none">
<li><img src="https://img.php.cn/upload/tool/000/000/001/58df1702d6551986.png" width='100' height="100">JS/HTML格式化工具</li>
<li><img src="https://img.php.cn/upload/tool/000/000/001/58df173b264e7870.png" width="100" height='100'>HTML/JS转换工具</li>
<li><img src="https://img.php.cn/upload/tool/000/000/009/58787e30ea451868.png" width='100' height='100'>MD5加密工具</li>
<li><img src="https://img.php.cn/upload/tool/000/000/001/58df175ec8d0d658.png" width='100' height='100'>CSS格式化工具</li>
<button>提交换色</button>
</ul>
</div>二，1，querySelector();可以获取页面元素的作用；querySelector()只返回获取的第一个满足条键的元素；
2,querySelectorAll();返回获取的满足条件的所有元素；返回的是一个数组对象，如果给每个元素添加样式javascript需要使用到for()循环，querySelectorAll()就省去了for()循环的步骤，可以直接给每个元素添加样式；
<script>
//用CSS选择器来获取元素
//querySelector(cssSelector) queryselectorAll(cssSelector)
//querySelector()只返回获取的第一个满足条件的元素
//querySelectorAll()返回所有的满足条件的元素
var btn=document.querySelector('button');
btn.onclick=function(){
//alert(document.querySelector('li'))
document.querySelectorAll('li')[1].style.background='yellow';
document.querySelectorAll('li')[2].style.color="blue";
//document.querySelector('li').style.background='yellowgreen';
//queryselectALL可以返回满足条件的所有元素省去了循环的麻烦
//querySelectorAll
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
