• js中获取css样式属性值


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

    (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。针对css样式里background-color;margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor。

    (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="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:#ddd;
      }
      </style>
    </head>
    <body>
      <div id="div1" style="100px;background-color:green;"></div>
    </body>
    <script type="text/javascript">
    window.onload=function(){  
       var oDiv=document.getElementById('div1');
       //使用style属性只能获取到内联样式
       console.log(oDiv.style.backgroundColor);
       console.log(getStyle(oDiv,'background'));
    }
    
    function getStyle(obj, attr){  
        //只适用于IE
        if(obj.currentStyle){
            return obj.currentStyle[attr]; 
        }else{ 
            //适用于FF,Chrome,Safa 
            return getComputedStyle(obj,false)[attr];  
        }
    }  
    </script>
    </html>

     关于window.getComputedStyle(element, [pseudoElt])

    参数解析:

    (1).element:必需,要获取样式值的元素对象。

    (2).pseudoElt:可选,表示指定节点的伪元素(:before、:after、:first-line、:first-letter等)。

    获取样式属性升级版:

    function getStyle(obj, attr , pseudoElt=false){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,pseudoElt)[attr]
    }

    源代码地址:https://github.com/zuobaiquan/javascript/blob/master/js中获取css样式属性值.html

  • 相关阅读:
    ironic port bind
    pdb /usr/bin/neutron-server
    networking_generic_switch
    [CodeForces586D]Phillip and Trains
    [CodeForces598D]Igor In the Museum
    [poj3468]A Simple Problem with Integers
    [bzoj1503][NOI2004]郁闷的出纳员
    [bzoj1208][HNOI2004]宠物收养所
    [luogu3384][模板]树链剖分
    [CodeForces869A]The Artful Expedient
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/8461754.html
Copyright © 2020-2023  润新知