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

当我们使用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;"

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

猜你喜欢

转载自blog.csdn.net/weixin_49098968/article/details/128961907