Question

请考虑以下代码段：

<!DOCTYPE html>
<html>
<body>
<div id="mydiv">Sample Text</div>
<script type="text/javascript">
var md=document.getElementById("mydiv");
md.style.cssText="background-color:yellow !important;color:red;font-size:70px;font-weight:bold;";
setTimeout(function(){
md.style.backgroundColor="blue";
md.innerHTML+="<br/>Updated!";
},2000);
</script>
</body>
</html>

说明：我正在尝试cssText浏览器支持，并注意到cssText在Firefox，Opera浏览器中没有按照我的预期工作。

上面的代码定义了“background-color：yellow！important”，2秒后背景颜色变为蓝色。但是因为我在cssText中指定了'！important'，所以我认为背景颜色不应该更新。这适用于IE，Chrome，Safari。但不是在Firefox，Opera。

有人可以建议。

编辑：我想为css属性指定！important规则，并通过javascript限制对它的进一步更改。我想用JavaScript实现这一点，即通过JavaScript指定！important。任何有关这方面的帮助将不胜感激。

Answer 1

在谷歌搜索其他内容时偶然发现了这个问题。

首先要理解的是，cssText不会创建另一种样式：它只是一种简化，可以让您一次分配多个样式。以下大致相同：

element.style.cssText = "background-color:yellow;color:red;";

element.style.backgroundColor = "yellow";
element.style.color = "red";

唯一值得注意的是，我相信分配给cssText会覆盖任何现有的元素样式。例如，以下内容将导致样式完全等于color:red;且不等于background-color:yellow;color:red;。 cssText在应用指定的元素样式之前有效地删除任何现有的元素样式：

element.style.backgroundColor = "yellow";
element.style.cssText = "color:red;";

要意识到的第二件事是!important没有将样式设为只读。它只能防止使用更高特异性的已定义样式，并且只有在定义时才会这样做。当您指定blue的背景颜色值时，您实际上是从声明中删除 !important。您必须将背景颜色设置为background-color:blue !important;才能保留它。

简而言之，如果有人用background-color:yellow !important;覆盖了您的background-color:blue;，那么您无能为力。除非你做一些其他奇特的工作，比如创建一个每X毫秒重置yellow !important样式的定时器间隔。但是你遇到了必须跟踪间隔的问题，特别是如果可能实际上想要将背景颜色设置为其他值，否则它将被覆盖你！

var element = ...;
setInterval(1000, function(){
  if (element.style.backgroundColor != "yellow !important") {
    element.style.backgroundColor = "yellow !important";
  }
});

我能想到的一件事是，如果这些样式是一成不变的，你可以让它们成为实际规则而不是内联元素样式。如果您将其作为规则，可以保留！important标记：

.bg-yellow {
  background-color: yellow !important;
}

element.className = "bg-yellow";

Answer 2

这是您修改过的JS代码。我已经检查了FF 27，它正在工作。

var md=document.getElementById("mydiv");
md.style.cssText="background-color:yellow !important;color:red;font-size:70px;font-weight:bold;";
setTimeout(function(){
  md.style.setProperty="background-Color:blue"; //modified this line
md.innerHTML+="<br/>Updated!";
},2000);

这是适合您的工作演示。 http://jsbin.com/kifozeka/2/edit

JavaScript cssText在Firefox和Opera浏览器中无法正常工作

2 个答案: