JS 获取计算后的样式

最新推荐文章于 2024-03-04 12:52:19 发布

boonyaxnn

最新推荐文章于 2024-03-04 12:52:19 发布

阅读量855

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/boonyaxnn/article/details/89341411

版权

JavaScript 专栏收录该内容

90 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在HTML中使用CSS设置元素样式，并提供了在现代浏览器和IE中获取元素计算后样式的兼容性方法。包括了div元素的样式设置、获取计算后高度的示例代码，以及一个兼容所有浏览器的getStyle函数。

摘要由CSDN通过智能技术生成

1、html代码

div class="box"></div>

2、css样式

<style>
    .box {
         height: 200px;
         width: 200px;
         background-color: orange;
         border: 20px solid red;
    }
</style>

3、获取计算后的样式

①非IE情况下：getComputedStyle(元素)[样式名]

var box = document.querySelector('.box');
var result = getComputedStyle(box)['height'];

②IE情况下：元素名.currentStyle[样式名]

var result = box.currentStyle['height'];
console.log(typeof result,result);

注意：①css样式+下划线或者不加下划线都支持；

②获取任意【元素】任意【css样式】值

③IE情况下，除了border。

兼容性写法：

   function getStyle(ele,style){
        var result = '';
        //校验浏览器类型
        if(ele.currentStyle){
            result = ele.currentStyle[style];
        }else{
            result = getComputedStyle(ele)[style];
        }
        return result;
    }