是唯一的方法来改变一个样式，以在JavaScript中执行每个元素？

我一直在寻找一些我想用JavaScript来调整全局风格的不同的东西。我想通过改变规定元素样式的CSS规则来做到这一点（类似于通过Webkit中的Inspector进行此操作），但在来到https://developer.mozilla.org/en/DOM/CSSStyleRule后，我现在不知道这是否可能：是唯一的方法来改变一个样式，以在JavaScript中执行每个元素？

style

返回规则CSSStyleDeclaration对象。 只读。

那么，有没有办法在JavaScript变得更高级别的样式？

来源

2011-08-21 Stuart P. Bentley

“只读”实际上意味着你不能直接重新定义它（例如'element.style = {background：“black”}'）。您可以修改'.style'的属性（例如'element.style.background =“black”'）。 –

要修改现有的样式，要么找到样式表中document.styleSheets或要修改的<style>或<link>元素的.sheet财产。然后按照它们所在的任何规则修改属性（请参阅https://developer.mozilla.org/en/DOM/CSSRuleList）。我建议不要使用CSSOM来修改属性，因为通过CSSOM修改CSS属性的浏览器支持是可怜的（没有任何浏览器支持它）。相反，只需设置一个字符串值。

如果您只想插入一条新规则，只需从上面的方法获取样式表即可，或者document.documentElement.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml","style")).sheet。然后使用insertRule添加您的规则。

来源

2011-08-21 06:36:12

如果通过“CSSOM”表示像'document.getElementById（“img-style”）。sheet.cssRules [0] .style.width = size +“px”'这样的东西，那么在我尝试的每个浏览器中都可以正常工作。 –

是的，这工作正常，但有一个首选的API修改属性，你可以使用真正的整数和CSS单位常量而不是字符串，但支持它是可怕的。 –

可以通过javascript以编程方式创建/更改CSS样式，但这通常不是解决问题的最简单方法，因为不同的浏览器以不同的方式进行，所以跨浏览器支持有点痛苦，除非您已经有一个库那个摘要。通常可以看到如何在此处执行此操作：http://www.quirksmode.org/dom/changess.html。

如果预先知道要切换的样式，那么在它们之间切换的最简单方法是在样式表中定义这两种样式，并使用不同的类指定来触发一个样式与另一个样式。

如果您只是试图影响一个对象或少量对象，您可以简单地在受影响的对象上通过javascript添加或删除类名。

如果有大量的对象，那么我所做的就是在body标签上添加一个类名，以触发替代样式对所有受影响的对象生效。它的工作原理是这样的：

很多这些在你的HTML：

<div class="foo"></div> 
<div class="foo"></div> 
<div class="foo"></div> 
<div class="foo"></div>

然后，有两个预先定义的CSS规则，这样的顺序：

.foo {background-color: #777;} 
.alternate .foo {background-color: #F00;}

然后，使用Javascript，任何时候你想改变为替代风格，你只需要这样做（使用jQuery或任何最喜欢的类库）：

$(document.body).addClass("alternate");

要返回到原来的风格，你可以删除类：

$(document.body).removeClass("alternate");

这并不一定要添加到body标签 - 它可以被添加到所有受影响的对象的任何共同的父。

我个人觉得这比编程创建样式规则简单得多，它将实际样式信息保留在代码之外（非程序员的设计人员可以更容易地访问它）。

您可以在这里看到实际这种技术：http://jsfiddle.net/jfriend00/UXKvg/

来源

2011-08-21 05:44:37 jfriend00

虽然我不想切换样式。我正在尝试编辑现有的样式。告诉我有办法做到这一点，然后不要说这种方式是没有用的。 –

这确实改变了一种风格。试试jsfiddle演示来看看它。我认为这是一个更好的方式来做到这一点，这是我知道如何编写代码的方式。我知道你可以通过JS获得样式表，但我不知道如何以跨浏览器的方式自己做（因为IE的老版本不同），所以我从来不这样做。这是解决这类问题的一种方法。抱歉尝试提供我认为是非常有用的想法。以下是关于JS访问样式表的基础知识：http://www.quirksmode.org/dom/changess.html。玩的开心。 – jfriend00

是唯一的方法来改变一个样式，以在JavaScript中执行每个元素？

回答

相关问题