diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/api/elementcssinlinestyle/style/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/api/elementcssinlinestyle/style/index.html')
-rw-r--r-- | files/zh-cn/web/api/elementcssinlinestyle/style/index.html | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/elementcssinlinestyle/style/index.html b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..2b825c80cc --- /dev/null +++ b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,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"><!DOCTYPE HTML> +<html> +<body style="font-weight:bold;"> + + <div style="color:red" id="myElement">..</div> + + </body> +</html></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] + "' > '" + computedStyle[prop] + "'\n"; + } +} +console.log(out)</pre> + +<p>输出结果如下:</p> + +<pre>... +fontWeight = '' > 'bold' +color = 'red' > '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> |