通过js修改同类型标签的css样式

最新推荐文章于 2023-03-21 21:31:37 发布

王二1999号

最新推荐文章于 2023-03-21 21:31:37 发布

阅读量752

点赞数

分类专栏： java 文章标签： java-ee javascript

本文链接：https://blog.csdn.net/c3245073527/article/details/121899414

版权

java 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

直接看代码往最后翻

问题遇到的现象和发生背景

通过js修改css样式可实现页面的动态效果，有良好的交互性
但是
通过修改指定div通过id即可找到该div对象，直接修改即可
如下

var div = document.getElementById("id001");

问题是：不是所有div都有id属性

此时就需要用其他方法获取div元素对象
如

 //注意：该方法获取到的都是数组【getElements】带有s的基本都是数组，数组通过下标访问即可
document.getElementsByClassName("class属性");
document.getElementsByName("name属性");
document.getElementsByTagName("直接通过标签名获取元素");
document.getElementsByTagNameNS("通过标签节点名获取元素");

带注释代码

//js代码
        <script type="text/javascript">
            window.onload = function() {
                /* document.getElementById("id001");
                是js中能直接找到目标元素的方法 */
                var input = document.getElementById("id001");
                
                /* 获取到的是包含该元素的数组 */
                var inputs = document.getElementsByTagName("input");
                /* 通过下标获取到数组的目标对象，
                    此处如果直接 调用数组本身 就会有如java中的空指针异常
                 */
                // 为第一个input标签绑定单击事件
                inputs[0].onclick = function() {
                    // 获取所有div组成的数组
                    var divs = document.getElementsByTagName("div");
                    // 使用循环遍历访问divs数组内的元素内容
                    for (var i = 0; i < divs.length; i++) {
                        divs[i].style.color="red";
                    }
                }
            }
        </script>

//doby代码
    <body>
        <div>
            <h1>div内的标题标签</h1>
            div内的文本内容
        </div>
        <div>div内的文本内容</div>
        <div>
            <div>
                <div>
                    多层div内的文本内容
                </div>
            </div>
        </div><br />
        没有div的文本内容<br /><br />
        <input type="button" value="将所有div内的字体改为红色" />
    </body>

点击按钮前

点击按钮后

结论：

除了通过id外，其他的方法获取到的都是包含元素的数组，都需要通过下标来访问

纯代码内容

代码注释上翻

<html>
    <head>
        <meta charset="utf-8">
        <title>通过js修改所有css的样式</title>
        <script type="text/javascript">
            window.onload = function() {
                var input = document.getElementById("id001");
                var inputs = document.getElementsByTagName("input");
                inputs[0].onclick = function() {
                    var divs = document.getElementsByTagName("div");
                    for (var i = 0; i < divs.length; i++) {
                        divs[i].style.color="red";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <h1>div内的标题标签</h1>
            div内的文本内容
        </div>
        <div>div内的文本内容</div>
        <div>
            <div>
                <div>
                    多层div内的文本内容
                </div>
            </div>
        </div><br />
        没有div的文本内容<br /><br />
        <input type="button" value="将所有div内的字体改为红色" />
    </body>
</html>