js中获取css样式属性值

Posted 想旅游咯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中获取css样式属性值相关的知识,希望对你有一定的参考价值。

关于js中style,currentStyle和getComputedStyle几个注意的地方

(1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。

(2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE。

(3)getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。

  注意:

    ① currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。

    ② 如果要设置相应值,应使用style。

补充:

内联方式:样式定义在单个的html元素中 ,如<p style="font-size:16px;">测试例子</p>

内部样式表:样式定义在HTML页的头元素中 

外部样式表:将样式定义在一个外部的CSS文件中(.css文件),由HTML页面引用样式表文件 

保证兼容的做法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>js中获取css样式属性值</title>
    <style type="text/css">
      #div1{
        width:200px; 
        height:200px; 
        background:red;
      }
    </style>
</head>
<body>
  <div id="div1" style="width:100px;">

  </div>
</body>
<script type="text/javascript">
window.onload=function(){  
   var oDiv=document.getElementById(div1);  
   console.log(getStyle(oDiv,width)); //100px
}  

function getStyle(obj, attr){  
    //只适用于IE
    if(obj.currentStyle){  
        return obj.currentStyle[attr]; 
    }else{ 
        //适用于FF,Chrome,Safa 
        return getComputedStyle(obj,false)[attr];  
    }
}  
</script>
</html>

 

如果 觉得文章不错,可以请博主喝一杯奶茶哦!!!

技术分享图片技术分享图片

以上是关于js中获取css样式属性值的主要内容,如果未能解决你的问题,请参考以下文章

js获取某元素的class里面的css属性值代码

js怎么获取css样式里的background属性值呢?

JS使用getComputedStyle()方法获取CSS属性值

JS使用getComputedStyle()方法获取CSS属性值

JS 获取CSS属性值

jQuery获取设置样式