<!-- 将ul里的li中含有class = "box"的li的背景颜色设置为红色
1. 获取含有class = "box"的li
2. 设置背景颜色为红色 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//sClass中s是字符串的意思
//将 需要获取className的方法 封装成函数
function getByClass(oParent, sClass) {
var aResult = [];
var aEle = oParent.getElementsByTagName("*");
for (var i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload = function () {
var oUl = document.getElementById("ul1");
// var ali = oUl.getElementsByTagName("li");
// for (var i = 0; i < ali.length; i++) {
// if(ali[i].className == "box"){
// ali[i].style.backgroundColor = "red";
// }
// }
var aBox = getByClass(oUl, "box");
for (var i = 0; i < aBox.length; i++) {
aBox[i].style.backgroundColor = "red";
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box">fagsadfasd</li>
<li>agfsetgsreg</li>
<li>argagsreg</li>
<li class="box">agsgsargf</li>
<li class="box">fsgsgsergse</li>
</ul>
</body>
</html>
将 需要获取className的方法 封装成函数
最新推荐文章于 2022-04-28 15:09:00 发布