获取样式

Posted

tags:

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

1.获取最终样式

 <script>
        //获取非行间样式(style标签里的样式或者link css文件里的样式),obj是元素,attr是样式名
        function getStyle(obj,attr){
             //针对IE
             if(obj.currentStyle){
                  return obj.currentStyle[attr];                             //由于函数传过来的attr是字符串,所以得用[]来取值
             }else{
                  //针对非IE
                  return window.getComputedStyle(obj,false)[attr];
             }
        }
        /*
             获取或者设置css属性
        
        */
        function css(obj,attr,value){
             if(arguments.length == 2){
                  return getStyle(obj,attr);
             }else{     
                  obj.style[attr] = value;
             }
        }
    </script>

 

2.getComputedStyle和currrentStyle都是获取元素的最终css,获取行间样式可以用getComputedStyle或者currentStyle,也可以直接style.attr;但是获取非行间样式只能用getComputedStyle或者currentStyle

 

3.window.getComputedStyle(ele,null)等价于document.defaultView.getComputedStyle(ele,null);

在gecko 2.0之前的第二个参数是必须设置的,第二个参数是一个伪元素,如果没有伪元素,设置为null.如果第二个参数为null,获取到的是当前元素的样式,如果是伪元素,获得的是伪元素的样式

<style>
div{
    width:200px;
    height:200px;
    background-color:#FC9;
    font-size:20px;
    text-align:center;    
}
div:after{
    content:"This is after";
    display:block;
    width:100px;
    height:100px;
    background-color:#F93;
    margin:0 auto;
    line-height:50px;
        
}
</style>

<body>
    <div id=‘myDiv‘>
        This is div
    </div>  
    <input id=‘btn‘ type="button" value=‘getStyle‘/>  
    <script>
        var btn = document.querySelector(#btn);
        btn.onclick = function(){
            var div = document.querySelector(#myDiv);
            var styleObj = window.getComputedStyle(div,after);
            console.log(styleObj[width]);
        }
    </script>
</body>

 

打印出伪元素:after的width 100px;

 4.

  4.1 getComputedStyle和currentStyle是只读的,而element.style是读写的

  4.2getComputedStyle和currentStyle获取的是最终应用在元素上的css对象,即使没有css代码,也会列出默认的属性,而element.style只能获取style属性中设置的css样式

5.getPropertyValue

     (1).getPropertyValue的方法在CSSStyleDeclaration对象的prototype中,而CSSStyleDeclaration对象是通过getComputedStyle得到的。

     (2).getPropertyValue里面的参数是CSS属性名字符串,而且CSS属性名不能是驼峰式表示的,比如width,backgroun-color,height,text-align都行,但是backgroundColor,textAlign这种驼峰表示的CSS属性名,getPropertyValue不能识别

     (3).

         obj.currentStyle[‘margin-left‘] 有效

         obj.currentStyle[‘marginLeft‘]  有效    

         window.getComputedStyle(obj,null)[‘margin-left‘]  有效

         window.getComputedStyle(obj,null)[‘marginLeft‘]  有效

         window.getComputedStyle(obj,null).getPropertyValue(‘margin-left‘)  有效

         window.getComputedStyle(obj,null).getPropertyValue(‘marginLeft‘)   无效

         obj.currentStyle.width   有效

         obj.currentStyle.background-color 无效

         obj.currentStyle.backgroundColor  有效

         window.getComputedStyle(obj,null).width  有效

         window.getComputedStyle(obj,null).background-color  无效

         window.getComputedStyle(obj,null).backgroundColor 有效

综上,就是带有"-"的属性不能直接点出来,所以有getPropertyValue方法来处理,但是可以用[]来取代getPropertyValue

6.document.defaultView和window的关系

document.defaultView返回当前document对象所关联的window对象,如果没有,返回null;

 

 
 
 

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

常用python日期日志获取内容循环的代码片段

javascript 即兼容性升级页面样式片段

html addthis分享片段和prelim样式

从Snipplr获取一个代码片段

使用 Python 代码片段编写 LaTeX 文档

Android 使用两个不同的代码片段获取当前位置 NULL