JS修改important的样式

我们在书写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');

这种方式。