js原生获取样式属性

一般来讲，如果属性直接在标签html中定义，我们可以利用elem.style.attribute或是getAttribute来获得属性，但是对于样式属性来说，方法就比较麻烦

获取内联的样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            #a{
                width: 100px !important;/*即便将最终样式设置成100px,控制太也依旧只能返回内联的样式*/
            }
        </style>
    </head>
    <body>
        <div id="a"  style="width: 10px;height: 10px;">
            我是邓润桦
        </div>
        <script type="text/javascript">
            var e=document.getElementById("a");
            var s=e.style.width;
            console.log(s);//10px
        </script>
    </body>
</html>

设置内联的样式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            #a{
                width: 100px !important;/*即便将最终样式设置成100px,控制太也依旧只能返回内联的样式*/
            }
        </style>
    </head>
    <body>
        <div id="a"  style="width: 10px;height: 10px;">
            我是邓润桦
        </div>
        <script type="text/javascript">
            var e=document.getElementById("a");
            e.style.width="50px";//要以字符串形式赋值
            console.log(e.style.width);//50px
        </script>
    </body>
</html>

获取最终的样式函数，这个函数既可以获取内联样式也可以获取外部样式和内部样式，这取决于最终的样式，也就是同css优先级

思路：

进行三次判断

1.首先先判断这个样式属性是不是就存在与html中，如果是优先获取，直接使用elem[attr]；

2.接着判断是否接受IE的方法来获取样式，IE获取样式的方式是elem.currentStyle[attr]；

3.最后判断是否接受W3C的方法获取CSS属性，这个方法较为繁杂，首先需要将属性名称转换，一般属性名称的命名格式是骆驼命名法，这里需要改为text-align的格式，所以需要使用replace方法修改，然后在利用document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr)获取属性值

*注意，在本函数中，调用对象属性使用的语法是style[attr]而不是style.attr，在传参的时候，只能使用这样的语法。

function attrStyle(elem,attr){
                if(elem.attr){
                    //若样式存在于html中，优先获取
                    return elem.style[attr];//用于函数传参不能使用style.attr
                }else if(elem.currentStyle){
                    //IE下获取CSS属性最终样式(同于CSS优先级)
                    return elem.currentStyle[attr];
                }else if(document.defaultView&&document.defaultView.getComputedStyle){
                    //W3C标准方法获取CSS属性最终样式（同于CSS优先级）
                    //注意此法属性原格式（text-align）获取的，故要转换一下
                    attr=attr.replace(/[A-Z]/g,'-$1').toLowerCase();//匹配字符串中的大写字母，并把找到的大写字母替换为“-”加该大写字母
                    return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr);
                }else{
                    return null;
                }
            }

*getComputedStyle()这个方法获取的是元素的css样式声明对象，因此要获得该对象的属性值，还需要配合getPropertyValue()

张鑫旭的博客参考：http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

getAttribute():

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            #a{
                width: 100px !important;
                left:100px !important;
            }
        </style>
    </head>
    <body>
        <div id="a"  style="width: 10px;height: 10px; left:200px">
            我是邓润桦
        </div>
        <script type="text/javascript">
            var e=document.getElementById("a");
            var s=e.getAttribute("left");
            console.log(s);//null
            e.setAttribute("left","400px");
            console.log(e.getAttribute("left"));//400px
        </script>
    </body>
</html>

在这个例子中，getAttribute()方法并不能获取内部样式或是内联样式，它获取的不能是样式属性，而是标签的属性。

目前，就我所知，要修改内部样式和外部样式是不可以的，都是要求修改在html上定义的样式，因此如果使用原生js建议把需要变更的属性，写在html上面。

设置样式属性的另一个方法：setProperty();由于这个方法同样是需要调用style对象，所以他本身也是只能操作内联样式。

来源：https://www.cnblogs.com/runhua/p/7170667.html

标签

charset