原生JS中如何获取CSS属性中的值

来源：互联网发布：模块化编程的好处编辑：程序博客网时间：2024/06/11 00:35

css文件中如何得到某个属性值：

一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，

返回的是一个CSS样式声明对象，只读，此方法支持Firefox浏览器;

语法：var style=window.getComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。

二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值，

利用element.CurrentStyle.attribute可获取
其与getComputedStyle区别：1、 currentStyle不支持伪类样式获取；
2、currentStyle不支持现代浏览器，支持IE

代码说明：

[html] view plain copy
 print?
<span style="font-size:14px;"><!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title></title>  
</head>  
<style type="text/css">  
#div1{  
    width:100px;height:100px;background: red;  
}  
</style>  
<body>  
    <div id="div1"></div>  
</body>  
<script type="text/javascript">  
    var oDiv = document.getElementById('div1');   
    /*  
        只能获取，不能设置  
        获取到的是计算后的样式  
        最好不要获取复合样式  
        所获取的样式要设初使值  
        获取到的样式类型是字符串  
        别空格  [' width']  
        *获取到的样式带px的   
        transform 获取不到  
        transition 不准确  
    */  
function getStyle(obj,attr){  
        if(obj.currentStyle){      //IE  
            return obj.currentStyle[attr];   
        }else{  
            return getComputedStyle(obj,"伪类")[attr];     //Firefox  
        }  
    }  
      
alert(getStyle(oDiv1,'background'));</html></span>  

然而在jQuery下直接使用$("element").css("属性"，"设置的值"),进行获取和修改。

1 0