Question

我正在尝试使用javascript创建一个非常低的特异性css属性。就像!unimportant（不存在）

一样

我不知道这是否可能。

我寻找类似!unimportant之类的东西的原因是我正在编写一个小的javascript插件。我想在其中为一个元素添加一个默认样式，以后应该很容易被用户覆盖。

但如果我写：

element.style.backgroundColor = "green";

如果不使用!important，用户将无法轻松覆盖上述样式。因此，我使用以下代码添加了动态样式标记：

var style = document.createElement('style');
// WebKit hack :(
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

然后到上面的代码，我使用以下代码添加了一个动态样式表：

var element = document.getElementById('main');
// To use attribute names to apply the styles
element.setAttribute('custom-el', '1');

var sheet = style.sheet;
var properties = "background-color: green;";
var elName = "[custom-el]";

if (sheet.insertRule) {
    sheet.insertRule(elName + "{" + properties + "}", 0);
} else if (sheet.addRule) {
    sheet.addRule(elName, properties, 0);
}

现在可以使用以下代码覆盖background-color: green：

div.main { 
    background-color: red;
}

但正如您在css中所看到的，我使用更高的特异性来覆盖background-color: green，即div + .green。

但我希望即使用户编写以下css时也会发生覆盖：

.main{   /* Could be simple class name or id name or even tag name */
     background-color: red;
}

Fiddle

这似乎是个小问题。但这对我来说是个大问题。请帮忙。

Answer 1

我会这样写：

element.style.backgroundColor = element.style.backgroundColor || "green";

如果backgroundColor未定义，那么它使用green作为backgroundColor，否则它将从样式表中获取backgroundColor。

Answer 2

最后我得到了答案..

document.head.insertBefore(style, document.head.children[0]);

我应该在head标记中插入已存在的样式表上方的动态样式表。

<强> Working Fiddle

不幸的是，这在任何IE版本中都不起作用。我还在寻找答案。

创建一个非常低的特异性css属性

2 个答案: