翻译正在进行中。

CSS对象模型(CSSOM),是DOM的一部分,通过暴露一些接口来允许操作很多CSS相关的信息。最初定义在DOM2 Style 建议中,现在这些接口形成了一个规范,CSS对象模型(CSSOM),旨在取代它。

在很多情况下,如果可能,通过className属性来动态操作类确实是最好的方式,因为所有的样式钩子的最终外观都可以在一个样式表中控制。这样写出的JavaScript代码也会变得更清晰,因为它不专注与样式细节,而是专注于所创作或者操作的每一部分的整体语义,将精细的样式细节留给样式表。然而实际上也有以一些获取或者操作样式规则有用的情况(无论是对于正样式包还是的那个元素),将在下面进一步详细描述。同样应该注意,同操作单独元素的样式一样,当说到操作样式表的时候,并不是真的操作实际的物理文档,而仅仅是文档的内部表示。

基本样式对象公开了  StylesheetCSSStylesheet 接口。这些接口包括 insertRuleselectorText以及parentStyleSheet 等成员,用于获取和操作组成CSS样式表的各个规则。

要从 document 中获取style 对象,可以使用 document.styleSheets 属性,并使用下标来获取某个对象(例如 document.styleSheets[0] 是为该文档定义的第一个样式表)

通过CSSOM修改样式表

<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
 background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
</head>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>

 DOM CSS Properties List 中给出了style属性中DOM中可用属性的列表。

使用CSS语法修改文档的样式,可以插入样式规则或者插入<style> 标签并将其innerHTML 属性设置为期望的CSS.

修改元素样式

 元素style 属性(见下面的DOM样式对象部分)也可以用于获取和设置元素的样式。然而,该属性只能返回通过内敛方式设置的样式属性(例如<td style="background-color: lightblue"> 返回 "background-color:lightblue",或者直接针对哪个元素使用  element.style.propertyName, 即使样式表中还有该元素上的其他样式)。

此外,当你在元素上设置某个属性的时候,你会覆盖并擦除掉别处为该元素的这个属性设置的值。以设置border属性为例,将覆盖掉在head部分或者外部样式表设置的该元素的border属性。然而这并不会影响元素的其他属性例如padding,margin或font等。

要修改特定元素的样式,可以将以下示例修改为你想要的样式。

<html>
<head>
<title>simple style example</title>

<script type="text/javascript">

function alterStyle(elem) {
  elem.style.background = 'green';
}

function resetStyle(elemId) {
  elem = document.getElementById(elemId);
  elem.style.background = 'white';
}
</script>

<style type="text/css">
#p1 {
  border: solid blue 2px;
}
</style>
</head>

<body>

<!-- passes a reference to the element's object as parameter 'this'. -->
<p id="p1" onclick="alterStyle(this);">
 Click here to change background color.
</p>

<!-- passes the 'p1' id of another element's style to modify. -->
<button onclick="resetStyle('p1');">Reset background color</button>

</body>
</html>

document.defaultView 对象的 getComputedStyle() 返回某个元素的所有经过计算的样式. 查看Example 6: getComputedStyle 示例章节了解更多使用该方法的信息。.

DOM样式对象

style 对象表示了一个单独的样式声明。不像document.styleSheets 集合中每个单独的样式规则,样式规则是通过 document 对象或者应用改样式的元素来访问的. 它表示特定元素的内联样式。

比这两个属性更重要的是使用 style 对象来给某个元素设置单独的样式属性。

<!DOCTYPE html>
<html>
 <head>
  <title>style Property Example</title>
  <link rel="StyleSheet" href="example.css" type="text/css">
  <script type="text/javascript">
    function stilo() {
      document.getElementById('d').style.color = 'orange';
    }
    function resetStyle() {
      document.getElementById('d').style.color = 'black';
    }
  </script>
 </head>

 <body>
  <div id="d" class="thunder">Thunder</div>
  <button onclick="stilo()">Click here to change text color</button>
  <button onclick="resetStyle()">Reset text color</button>
 </body>
</html>

style的 media 和type 给不给出都可以。

使用setAttribute方法

注意,你也可以通过获得元素的引用然后使用它的setAttribute 方法指定CSS属性和值来改变该元素的样式。

var el = document.getElementById('some-element');
el.setAttribute('style', 'background-color:darkblue;');

 

但请注意, setAttribute 会移除该元素样式对象中已经定义的其他样式属性。如果上面的some-element 有一个行内样式属性:style="font-size: 18px", 其值将会因为使用了setAttribute 而被移除。

文档标签和贡献者

此页面的贡献者: mdnwebdocs-bot, hbmakeit
最后编辑者: mdnwebdocs-bot,