妙味——getByClass

最新推荐文章于 2025-09-07 12:15:11 发布

weixin_30667301

最新推荐文章于 2025-09-07 12:15:11 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/baixc/p/3458414.html

本文介绍如何使用JavaScript通过获取元素并修改其样式属性来动态改变HTML元素的背景颜色，具体步骤包括定义函数、获取指定类名的元素集合、遍历元素应用样式，并在页面加载时立即执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script>
function getByClass(oParent,sClass){
    var aEle = oParent.getElementsByTagName('*');
    var aResult = [];
    var i = 0;

    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 aBox = getByClass(oUl,'box');
    var i = 0;

    for(var  i=0;i<aBox.length;i++){
        aBox[i].style.background='red';    
    }

}
</script>
</head>
<body>
    <ul id="ul1">
        <li></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>