Javascript 创建一个非常低的css属性

我正在尝试使用javascript创建一个非常低专用性的css属性。就像

！不重要的

（不存在）

我不知道这是否可能

我寻找类似

的东西的原因！不重要的是，我正在编写一个小的javascript插件。在其中，我想向元素添加一个默认样式，该样式稍后将被用户轻松覆盖

但如果我写：

element.style.backgroundColor = "green";

如果不使用
，用户将无法轻松覆盖上述样式！重要信息
。因此，我使用以下代码添加了一个动态样式标记：

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);
}

div.main { 
    background-color: red;
}

然后在上述代码中，我使用以下代码添加了一个动态样式表：

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);
}

div.main { 
    background-color: red;
}

现在，可以使用以下代码覆盖背景色：绿色

：

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);
}

div.main { 
    background-color: red;
}

但正如您在css中所看到的，我使用了更高的特异性来覆盖

背景色：绿色，即
div
+
.green

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

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


这似乎是个小问题。但这对我来说是个大问题。请帮忙。
我只想这样写：

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

其中，如果
backgroundColor
未定义，则它使用
green
作为背景色，否则它将从样式表中获取
backgroundColor
。
最后我得到了答案

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

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


不幸的是，这在任何IE版本中都不起作用。我仍在寻找答案。
不确定我是否完全理解您的意思，但是在
元素上设置基本样式如何（比如说
div
）？@Harry如果我将样式应用于
div
标记，那么它将应用于所有div元素。这不是我要找的…为什么不使用！重要信息：在“覆盖的”css上，那么内联样式被覆盖为什么不只是有一个类而没有样式附加到它？@slime，这类似于有一个自定义属性。。我在代码中使用的颜色。假设
backgroundColor
未定义。然后，
绿色
颜色将应用于我无法使用
.main{background color:red；}
在css中覆盖的元素。要覆盖，我应该使用
！重要信息
，正如我在帖子中解释的那样，我不想使用它。我无法获得它。。请检查这个。嗯，如果css中没有定义背景色，它将变得透明。@Nick它没有将绿色设置为背景色，因为如果不在css中设置，它将使用透明。@Nick当我删除css样式时，它没有显示
绿色
颜色。我不知道下面的解决方案是否有效，但有人否决了它。也许这不是理想的解决方案。