多个具有相同id的元素的响应

MrX_YOUNG

于 2020-07-03 13:37:06 发布

阅读量433

点赞数

分类专栏：一些问题文章标签： css

本文链接：https://blog.csdn.net/MrX_YOUNG/article/details/107103945

版权

一些问题专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在HTML中使用相同ID的多个元素如何响应CSS样式和JavaScript选择器。当多个元素拥有相同的ID时，它们都会响应CSS文件中对该ID的描述，但在JavaScript中使用ID选择器时，仅首个匹配元素会响应样式更改。文章还介绍了如何通过属性选择器使所有元素响应JS样式更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当有几个元素具有相同的id时，如

    <div id="red">1</div>
    <div id="red">2</div>
    <div id="red">3</div>
    <div id="red">4</div>
    <div id="red">5</div>

他们会都响应在css文件中对该id的描述，如

    <style>
        div {
            width: 200px;
            height: 100px;
            margin-top: 20px;
        }
        
        #red {
            background-color: red;
        }
    </style>

此时浏览器显示为
在这里插入图片描述但如果在js中使用id选择器来改变样式，只有第一个具有对应id的元素会响应这个改变

    <script>
        function btnclick() {
            $('#red').css("background-color", "blue")
        }
    </script>

此时浏览器显示
在这里插入图片描述如果想要所有具有相同id的元素都响应，则可以使用属性选择器

        function btnclick2() {
            $('div[id="red"]').css("background-color", "blue")
        }

此时浏览器显示
在这里插入图片描述