window方法：getComputedStyle()

最新推荐文章于 2024-04-08 21:49:59 发布

.NET跨平台

最新推荐文章于 2024-04-08 21:49:59 发布

阅读量934

点赞数

分类专栏： Javascript编程知识

Javascript编程知识专栏收录该内容

33 篇文章

订阅专栏

本文介绍了getComputedStyle()方法的使用方式及注意事项，展示了如何利用此方法获取元素的实际样式，包括通过伪元素获取样式信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`getComputedStyle()`方法

该window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值。单个CSS属性值通过对象提供的API或通过使用CSS属性名称进行索引来访问。

getComputedStyle()方法语法

var style = window.getComputedStyle（element [，pseudoElt ]）;

element
要获取其计算风格的Element。
pseudoElt（可选的）
指定要匹配的伪元素的字符串。必须省略（或null）常规元素。

注意：在Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）之前，需要参数pseudoElt。如果为null，则不需要指定此参数的其他主要浏览器。Gecko已被更改为与其他浏览器的行为相匹配。

返回的style是一个活动CSSStyleDeclaration对象，它在元素的样式更改时自动更新。

`getComputedStyle()`方法示例

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// this is equivalent to:
// var style = document.defaultView.getComputedStyle(elem1, null);

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    console.log(prop+" : "+cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i=0;i<len;i++) {
 
    var style = cs[i];
    console.log(style+" : "+cs.getPropertyValue(style));
  }

}

说明

返回的对象与从元素style属性返回的CSSStyleDeclaration对象的类型相同；但是，这两个对象有不同的用途。从getComputedStyle返回的对象是只读的，可用于检查元素的样式（包括由<style>元素或外部样式表设置的样式）。该elt.style对象应该用于设置特定元素的样式。

第一个参数必须是一个Element（传递非元素节点，如#text节点，将引发错误）。从Gecko 1.9.2（Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0）开始，返回的URL值现在在url周围有引号，如下所示：url("http://foo.com/bar.jpg")。

defaultView

在线的许多代码示例中，getComputedStyle都是从document.defaultView对象中使用的。几乎在所有情况下，这都是不必要的，就像getComputedStyle在window对象上一样。defaultView模式可能是：（1）不想为window编写规范；（2）创建一个在Java中也可用的API的组合。然而，有一种情况必须使用defaultView的方法：当使用Firefox 3.6来访问镜框样式时。

与伪元素一起使用

getComputedStyle可以从伪元素中提取样式信息（例如：::after, ::before, ::marker, ::line-marker）。

<style>
 h3::after {
   content: ' rocks!';
 }
</style>

<h3>generated content</h3> 

<script>
  var h3 = document.querySelector('h3'); 
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

注意

返回的CSSStyleDeclaration对象将包含所有受支持的CSS属性longhand名称的活动值。示例longhand名称是border-bottom-width，而border-width和border是示例shorthand属性名称。最安全的方法是只使用font-size之类的longhand名称来查询值。使用shorthand名称查询（例如font）将无法与大多数浏览器一起使用。

可以使用getPropertyValue(propName)API或通过直接索引到对象（例如，cs[' z-index']或cs.zIndex。）来访问CSS属性值

getComputedStyle返回的值称为resolved values（已解析值）。这些通常与CSS 2.1 computed values（计算值）相同，但对于某些较旧的属性：width、height或者padding，它们是used values。最初，CSS 2.0将计算值定义为级联和继承后属性的“随时可用”的最终值，但CSS 2.1将计算值重新定义为预布局，并将值用作后置布局。对于CSS 2.0属性，该getComputedStyle函数返回计算值的旧含义，现在称为已使用的值（used values）。预布局值和后布局值之间的差异示例包括表示元素宽度或高度的百分比（也称为布局）的分辨率，因为只有在使用值的情况下，这些百分比才会被其等效像素所取代。

在某些已知的情况下，返回的值明显不准确。特别地，为了避免所谓的CSS历史泄漏安全性问题，浏览器可以明确地“谎报”关于链接的使用值，并且始终返回值，就像用户从未访问过链接的站点一样。大多数其他现代浏览器对伪选择器样式的应用和getComputedStyle返回的值的应用程序进行了类似的更改。

在CSS转换期间，getComputedStyle返回Firefox中的原始属性值，但返回WebKit中的最终属性值。

在Firefox中，具有该auto值的属性将返回已使用的值，而不是值auto。所以，如果你在一个包含height:30px并且它的包含块是height:100px;的元素中申请top:auto;和bottom:0;，则在请求top的计算样式时，Firefox将返回top:70px，因为100px-30px=70px。