基本代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            color:yellow;
        }
    </style>
</head>
<body>
    <div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>

1.通过使用element.style属性来获取

<script>
    var div = document.getElementsByTagName("div")[0];
    console.log(div.style.color); //""
    console.log(div.style.backgroundColor); //red
</script>

element.style属性只能获取行内样式，不能获取<style>标签中的样式，也不能获取外部样式

由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。

<script>
       var div = document.getElementsByTagName("div")[0];
        div.style['background-color'] = "green";
        console.log(div.style.backgroundColor); //green
    </script>

 2.通过getComputedStyle和currentStyle来获取样式

getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11

<script>
    var div = document.getElementsByTagName("div")[0];
    var styleObj = window.getComputedStyle(div,null);
    console.log(styleObj.backgroundColor); //red
    console.log(styleObj.color); //yellow
</script>

currentStyle在IE里能得到完美支持，chrome不支持，ff不支持

    <script>
        var div = document.getElementsByTagName("div")[0];
        var styleObj = div.currentStyle;
        console.log(styleObj.backgroundColor); //red
        console.log(styleObj.color); //yellow
    </script>

3.ele.style和getComputedStyle或者currentStyle的区别

　  3.1 ele.style是读写的，而getComputedStyle和currentStyle是只读的

　 3.2 ele.style只能得到行内style属性里面设置的CSS样式，而getComputedStyle和currentStyle还能得到其他的默认值

3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终CSS样式

4.获取样式兼容性写法

<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>

5.window.getComputedStyle(ele[,pseudoElt]);

第二个参数如果是null或者省略，则获取得到是ele的CSSStyleDeclaration对象

如果是一个伪类，则获取到的是伪类的CSSStyleDeclaration对象

<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>

 6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

<script>
        var div = document.getElementsByTagName("div")[0];
        var styleObj = window.getComputedStyle(div,null);
        console.log(styleObj.getPropertyValue("background-color"));
</script>

getPropertyValue(propertyName);中的propertyName不能是驼峰式表示

　　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

7.defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView,  那是在firefox3.6上访问子框架内的样式 (iframe)

MDN--getComputedStyle:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

JS之获取样式的更多相关文章

  1. js如何获取样式？

    在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...

  2. js中获取样式的俩种方法 style.color和style['color'] 区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js中获取css的样式

    因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...

  4. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  5. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  6. 为什么我获取不到这个css样式？js原生获取css样式总结

    还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...

  7. JS获取样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  9. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

随机推荐

  1. 经验分享：多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  2. 20145304 Java第三周学习报告

    20145304 <Java程序设计>第三周学习总结 教材学习内容总结 1.定义类: 类定义时使用class关键词,建立实例要使用new关键词. 代码如下: /*定义类 书上例子 衣服的型 ...

  3. 【BZOJ】1513: [POI2006]Tet-Tetris 3D

    题意 给\(n(1 \le n \le 20000)\)个立方体\((x, y, z)\),依次落下.求所有立方体落下完了以后最高的高度. 分析 平面求最大值,平面更新最大值. 题解 二维线段树走起, ...

  4. 李洪强iOS经典面试题130

    绘图与动画 CAAnimation的层级结构 CAPropertyAnimation是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使用它的两个子类:CABasicAnimatio ...

  5. mysql配置之skip-external-locking

    转载:http://www.kuqin.com/database/20120815/328905.html MySQL的配置文件my.cnf中默认存在一行skip-external-locking的参 ...

  6. linux recv 返回值与linux socket 错误分析

    转载:http://blog.csdn.net/henry115/article/details/7054603 recv函数 int recv( SOCKET s, char FAR *buf, i ...

  7. ubuntu su Authentication failure

    这个问题产生的原因是由于ubtun系统默认是没有激活root用户的,需要我们手工进行操作,在命令行界面下,或者在终端中输入如下命令: sudo passwd Password:你当前的密码 Enter ...

  8. 利用SQL注入漏洞登录后台的实现方法 。。。。转载

    一.SQL注入的步骤 a) 寻找注入点(如:登录界面.留言板等) b) 用户自己构造SQL语句(如:' or 1=1#,后面会讲解) c) 将sql语句发送给数据库管理系统(DBMS) d) DBMS ...

  9. 关于mysql（或MariaDB）中的用户账号格式

    之前在修改数据库本地root用户密码时,发现我远程连接的root用户的密码并没有改变,之后查了一下,发现原来这两个root不是同一个用户(汗..) 于是联想到之前配置数据库每次给用户赋予远程连接权限时 ...

  10. Runtime Error---Description: An application error occurred on the server....

    [原]Runtime Error---Description: An application error occurred on the server.... 2010-1-7阅读2010 评论3 D ...