---
title: Window.getDefaultComputedStyle()
slug: Web/API/Window/getDefaultComputedStyle
translation_of: Web/API/window/getDefaultComputedStyle
---
<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>

<p><code>getDefaultComputedStyle()</code> 给出元素的所有CSS属性的默认计算值(<a href="/en-US/docs/Web/CSS/computed_value">computed values</a> )，忽略作者样式。也就是说，只考虑用户代理和用户风格。</p>

<h2 id="语法及参数说明">语法及参数说明</h2>

<pre class="syntaxbox">let <em>style</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
</pre>

<dl>
 <dt>element</dt>
 <dd>获取计算样式的元素</dd>
 <dt>pseudoElt {{optional_inline}}</dt>
 <dd>指定匹配的伪类. 通常情况下可以为空.</dd>
</dl>

<p>返回的样式是一个 <a href="/en-US/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象.</p>

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

<pre class="brush: js">var elem1 = document.getElementById("elemId");
var style = window.getDefaultComputedStyle(elem1);
</pre>

<pre class="brush: js">&lt;style&gt;
#elem-container {
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
&lt;/style&gt;

&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
&lt;div id="output"&gt;&lt;/div&gt;

&lt;script&gt;
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getDefaultComputedStyle(elem).position;
    document.getElementById("output").innerHTML = theCSSprop; // 将会输出 "static"
&lt;/script&gt;   </pre>

<h2 id="Description">Description</h2>

<p>The returned object is of the same type as the object returned by <code><a href="/en-US/docs/Web/API/Window/getComputedStyle">getComputedStyle</a></code>, but only takes into account user-agent and user rules.</p>

<h2 id="使用伪元素">使用伪元素</h2>

<p><code>getDefaultComputedStyle</code> 同样可以从伪元素中获取属性 (比如, <code>::after</code>, <code>::before</code>).</p>

<pre class="brush: html">&lt;style&gt;
 h3:after {
   content: ' rocks!';
 }
&lt;/style&gt;

&lt;h3&gt;generated content&lt;/h3&gt;

&lt;script&gt;
  var h3       = document.querySelector('h3'),
      result   = getDefaultComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // 返回 'none'
&lt;/script&gt;
</pre>

<h2 id="备注">备注</h2>

<p>The returned value is, in certain known cases, expressly incorrect by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the <code>:visited</code> pseudo-selector. See <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented.</p>

<h2 id="Specifications">Specifications</h2>

<p>Proposed to the CSS working group.</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>19</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>pseudo-element support</td>
   <td>{{CompatNo}}</td>
   <td>19</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>19</td>
   <td>7.5</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>pseudo-element support</td>
   <td>{{CompatNo}}</td>
   <td>19</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>