javascript - 是否可以设置 cssRule 的 cssText 属性

Question

我正在尝试编辑 cssRule 的 cssText 属性。我经常看到它这样做：

• 为什么更改 cssText 中的高度会删除背景：无？
• 在启动时重新定位我的图像

通常它使用： cssText.replace( ... ) 完成。

它似乎对除我以外的所有人都有效。有人可以解释一下为什么以下方法不起作用：

    var cssText = document.styleSheets[1].cssRules[0].cssText;
    document.styleSheets[1].cssRules[0].cssText = cssText.replace( "red", "yellow" );

小提琴在这里：http: //jsfiddle.net/KbkFH/3/

Answer 1

你几乎拥有它。你只是错过了style

$( document ).ready(
function() {
    //.style was missing
    var cssText = document.styleSheets[1].cssRules[0].style.cssText;
    document.styleSheets[1].cssRules[0].style.cssText = cssText.replace( "red", "yellow" );
    }
);

更新小提琴：http: //jsfiddle.net/KbkFH/6/

注意：如果规则包含一个类名，redesign它将替换类名，yellowesign这可能不是您想要的。在不解析样式或针对特定样式的情况下使用替换时要小心。

Answer 2

实际上，您的代码正在按方面工作。

CSSRule.cssText:cssText 返回样式规则的实际文本

检查此使用动态样式信息

Answer 3

Javascript DOM 样式

  var div = document.querySelectorAll("div");
 
  div[0].style.cssText = "border: 5px solid yellow; padding: 10px"; 
  div[1].setAttribute("style", "border: 5px solid red; margin: 20px");

<div>cssText yellow</div>
<div>setAttribute red</div>