files/zh-cn/web/api/htmlelement/style/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
title: HTMLElement.style
slug: Web/API/HTMLElement/style
translation_of: Web/API/ElementCSSInlineStyle/style
---
<div>{{ APIRef("HTML DOM") }}</div>

<p><code><strong>HTMLElement.style</strong></code> 属性返回一个 <a href="/zh-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象，表示元素的 内联<a href="/zh-CN/docs/Web/HTML/Global_attributes#style"><code>style</code> 属性（attribute）</a>，但忽略任何样式表应用的属性。 通过 <code>style</code> 可以访问的 CSS 属性列表，可以查看 <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a>。</p>

<p>由于 <code>style</code> 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。</p>

<h3 id="设置_style_属性">设置 <code>style</code> 属性</h3>

<p>注意<strong>不能</strong>通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的<code><a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>对象是只读的。但是style属性本身的属性<strong>能</strong>够用来设置样式。此外，通过单独的样式属性（如</code>elt.style.color = '...'<code>）比用</code>elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。</p>

<h2 id="例子">例子</h2>

<pre class="brush:js">// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black";
// 或者
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// 设置特定样式，同时保持其他内联样式值不变
elt.style.color = "blue";
</pre>

<h3 id="获取元素样式信息">获取元素样式信息</h3>

<p>通常，要了解元素样式的信息，仅仅使用 <code>style</code> 属性是不够的，这是因为它只包含了在元素内嵌 style 属性（attribute）上声明的的 CSS 属性，而不包括来自其他地方声明的样式，如 {{HTMLElement("head")}} 部分的内嵌样式表，或外部样式表。要获取一个元素的所有 CSS 属性，你应该使用 {{domxref("window.getComputedStyle()")}}。</p>

<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;body style="font-weight:bold;"&gt;

    &lt;div style="color:red" id="myElement"&gt;..&lt;/div&gt;

 &lt;/body&gt;
&lt;/html&gt;</pre>

<p>下面的代码输出 style 所有属性的名字，以及为元素 <code>elt</code> 显式设置的属性值和继承的计算值（computed value）：</p>

<pre class="brush: js">var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' &gt; '" + computedStyle[prop] + "'\n";
  }
}
console.log(out)</pre>

<p>输出结果如下:</p>

<pre>...
fontWeight = '' &gt; 'bold'
color = 'red' &gt; 'rgb(255, 0, 0)'
...
</pre>

<p>请注意，计算样式中font-weight的值为“bold”，元素的style属性中缺少该值</p>

<h2 id="Specification" name="Specification">规范</h2>

<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>

<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p>

<h2 id="兼容性">兼容性</h2>


<p>{{Compat("api.HTMLElement.style")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="/zh-CN/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li>
</ul>