JS示例22-通过className查找元素
一、知识要点
设置class为box的元素为红色字体
二、源码参考
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function() {
// 设置class为box的元素为红色字体
var oUl = document.getElementById('ul1');
var oLi = oUl.getElementsByTagName('li');
for(var i = 0; i < oLi.length; i++) {
if(oLi[i].className == 'box') {
oLi[i].style.color = 'red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box">测试</li>
<li>测试</li>
<li class="box">测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</body>
</html>封装方法：根据className获取元素
<script>
// 封装方法：根据className获取元素
function getByClass(oParent, sName) {
var arr = [];
var aEle = oParent.getElementsByTagName('*'); // 获取所有元素节点
for(var i = 0; i < aEle.length; i++) {
if(aEle[i].className == sName) {
arr.push(aEle[i]);
}
}
return arr;
}
window.onload = function() {
// 设置class为box的元素为红色字体
var oUl = document.getElementById('ul1');
var oBox = getByClass(oUl, 'box'); // 调用封装方法
for(var i = 0; i < oBox.length; i++) {
oBox[i].style.color = 'red';
}
}
</script>三、运行效果
image.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录