简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 原生jsquerySelector和querySelectorAll方法
Blogger Information
Blog 5
fans 2
comment 1
visits 4637
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
原生jsquerySelector和querySelectorAll方法
zhihuanwang的博客
Original
1361 people have browsed it

    使用querySelector函数和querySelectorAll函数时要注意参数的语法规则。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生jsquerySelector和querySelectorAll方法</title>
    <style>
    </style>
</head>
<body>
<ul style="list-style: none;">
    <li><img class="red blue" src="images/eguomeinv.jpg" width="300" alt=""></li>
    <li><img src="images/meiguomeinv.jpg" width="300" alt=""></li>
    <li><img src="images/beioumeinv.jpg" width="300" alt=""></li>
</ul>
<button>querySelector</button>
<button>querySelectorAll</button>
<script>
document.querySelectorAll('button')[0].onclick=function () {
 document.querySelector('.red,.blue').style.borderRadius='50%'
}
document.querySelectorAll('button')[1].onclick=function () {
 for(var i=0;i<document.querySelectorAll('img').length;i++){
 document.querySelectorAll('img')[i].style.borderRadius='50%'
 }
}
</script>
</body>
</html>

点击querySelector按钮后结果

2017-12-21_182141.jpg

点击querySelectorAll后的结果：

2017-12-21_182446.jpg

其中querySelectorAll返回一个数组，需要自己遍历。





Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！