javascipt：getComputedStyle()

最新推荐文章于 2022-10-10 00:24:15 发布

转载最新推荐文章于 2022-10-10 00:24:15 发布 · 658 阅读

javascript基础理论研究专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何使用JavaScript获取HTML元素的样式值，包括绝对定位、左偏移、上偏移和高度等属性，并通过实例展示了如何计算并输出元素的高度。

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

简单的说，这个方法是用来获取元素样式的值的，语法为：

var style = window.getComputedStyle(element[, pseudoElt]);

其中，element 是用于计算样式的元素，为必须参数，pseudoElt为可选参数，主要用于选取伪元素进行匹配计算

用法示例：

<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>

可以看出，getComputedStyle 返回的对象跟 element 调用 style 属性返回的对象是同一种类型，可以称为 CSSStyleDeclaration. 但两个对象有不同的用处， getComplutedSytle返回的对象是只读对象，用于检测元素的样式（包括在

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

<h3>generated content</h3> 

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

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