jQuery修改!important的css样式&jQuery修改css未生效

保持好运

已于 2023-05-12 11:17:23 修改

阅读量1.5k

点赞数 1

分类专栏： JavaScript&Css 文章标签： css jquery 前端

于 2023-02-09 23:25:48 首次发布

本文链接：https://blog.csdn.net/weixin_49098968/article/details/128961907

版权

JavaScript&Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法

1.解决办法

原有代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery修改css</title>
        <style>
            #change-css {
                color: red;
            }
        </style>
    </head>  
    <body>
        <div id="change-css" style="font-size:24px">
       		jQuery修改css
        </div>
    </body>
</html>

通过以下代码修改css样式是无效的：

$("#change-css").css("color", "#FFFFFF");
$("#change-css").css("color", "#FFFFFF !important");

有效修改css样式代码：

$("#change-css").css("cssText", "color : #FFFFFF !important");
$("#change-css").css("cssText", "color : #FFFFFF !important; font-weight : bold !important"); //修改多个css样式

2.补充：cssText知识

2.1 定义及使用

cssText 属性用于设置或者返回元素声明的内联样式。

2.1.1 返回指定元素的内联样式值：

let x = document.getElementsById("change-css").style.cssText;
console.log(x); //color: rgb(255, 255, 255);

2.1.2 设置指定元素的内联样式

document.getElementsById("change-css").style.cssText = "color : pink;"

如果对你有所帮助，请记得一键三联哦

保持好运

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jQuery修改!important的css样式&jQuery修改css未生效

jQuery修改带有!important的css样式以及jQuery修改css未生效的解决办法
复制链接

扫一扫

专栏目录

jQuery修改!important的css样式&jQuery修改css未生效

1.解决办法

2.补充：cssText知识

2.1 定义及使用

“相关推荐”对你有帮助么？