JS修改important的样式

2017年10月18日Web前端

我们在书写CSS时经常会使用 !important来给样式最高的权重,使得这些样式不会被其他样式覆盖。当然同样的问题也来了,当我们需要使用JS来覆盖这些样式时,该如何操作呢?

一、问题

假如我们有以下代码:

<style type='text/css'>
div {
    width: 100px;
    height: 100px;
    background-color: olive !important;
}
</style>

<div id="box"></div>

页面上是一个宽高都是100px,背景色是olive的正方形,此时,我们需要使用JS将他的背景色改为蓝色。

我们首先想到的是使用style.属性的方式去改变。可是我们都知道,important的权重是高于行内样式的。于是,

document.getElementById('box').style.backgroundColor = 'red';

这段JS变有了,实际并没有生效,通过F12控制台,我们发现,实际是添加上了,但是权重问题,被覆盖了。

既然内联的样式有important,那么行内的样式有important会是什么样的效果呢? 直接在Element中添加上important,

于是,div变成了红色。

二、解决方案

我们知道了给行内的样式增加important可以覆盖掉内联中的important的样式,毕竟important相同,行内还是要比内联的样式高的。 我们尝试:

document.getElementById('box').style.backgroundColor = 'red !important';

发现,这种写法,并没有成功添加上,当然也就生效不了。

查看原生JS操作CSS样式,我们发现style有个cssText属性,他可以获取整个的行内样式,而且他也是可以被赋值的,那么此属性就可以被利用了。 于是,我们再次尝试,

document.getElementById('box').style.cssText = "background-color:red !important";

此时,达到了我们真正的目的。

注:刚说过了cssText是整个行内的样式,注意赋值时覆盖其他样式。 同样的,在jQuery下,可以通过

$('#box').css('cssText', 'background-color:red !important');

这种方式。