jq中的addClass()方法与样式冲突

taotu_tao

已于 2022-08-28 10:21:04 修改

阅读量973

点赞数 1

文章标签： css html5 css3

于 2022-08-27 21:31:18 首次发布

本文链接：https://blog.csdn.net/taotu_tao/article/details/126562246

版权

添加类样式方法

addClass()：向被选元素添加指定的类名

注意：该方法仅仅只是在原有基础上添加属性，不会覆盖已存在的 class 属性

提示：如需添加多个类，使用空格分隔类名

一、添加一个class属性

<style>
    .div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .style {
        width: 300px;
        background-color: yellow;
        border: greenyellow 5px solid;
    }
</style>

<body>
    <div class="div"></div>
</body>
<script>
    $('.div').addClass('style')
</script>

通过元素选择发现style成功追加在了div的后面

结果

二、这时候如果将div和style属性的定义顺序调换后，就出现了问题

<style>
    .style {
        width: 300px;
        background-color: yellow;
        border: greenyellow 5px solid;
    }

    .div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    <div class="div"></div>
</body>
<script>
    $('.div').addClass('style')
</script>

发现背景颜色和宽度并没有改变，复习css的样式覆盖规则后知道了问题所在

样式冲突时，样式权值高者获胜

样式权值相同时，后定义者获胜

权值定义如下：

CSS选择器	权值
标签选择器	1
类选择器	10
ID选择器	100
内联样式	1000
伪元素(:first-child等)	1
伪类(:link等)	1

很明显，这里样式发生了冲突，并且权值一样，所以看定义顺序

div在style后定义故页面渲染了div的样式

三、添加多个class属性

<style>
    .div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .style {
        width: 300px;
        background-color: yellow;
        border: greenyellow 5px solid;
    }

    .text {
        color: brown;
        font-size: 30px;
        text-align: center;
    }
</style>

<body>
    <div class="div">addClass</div>
</body>
<script>
    $('.div').addClass('style text')
</script>

taotu_tao

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq中的addClass()方法与样式冲突

添加类样式方法addClass()可以向被选元素添加指定的类名，但是该方法仅仅只是在原有基础上添加属性，不会覆盖已存在的 class 属性，如需添加多个类，使用空格分隔类名。当样式发生冲突时，样式权值高者获胜；当样式权值相同时，后定义者获胜。.........
复制链接

扫一扫