JavaScript操作样式与内联样式

学习JS读取元素样式时遇到的一个小问题，谷歌浏览器不支持obj.currentStyle获取HTMLElement计算后的样式。然后整理JS操作样式和内联样式如下：

1.obj.style获取的是内联样式，即style属性中的值

以下面一个JS操作内联样式的例子作为讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #box1{
            width:200px;
            height:200px;
            background-color: brown;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                //通过JS修改元素的样式
                //语法：元素.style.样式名=样式值

                //注意：如果css的样式中含有-，这种名称在JS中是不合法的，比如background-color，需要将这种样式名称修改为驼峰命名法
                //通过style属性设置的样式都是内联样式
                //内联样式有较高的优先级，所以通过JS修改样式往往会立马显示
                //尽量不要为样式加上！important，因为通过JS也不能覆盖该样式，此时会导致JS修改的样式不成功
                box1.style.width="500px";
                box1.style.height="400px";
               // box1.style.background-color="yellow";
               box1.style.backgroundColor="yellow";

            };
            var btn02=document.getElementById("btn02");
            btn02.onclick=function(){
                //读取的是内联样式，样式表里面的读取不了
                alert(box1.style.width);
                alert(box1.style.backgroundColor);
            }
        }
    </script>
</head>
<body>
    <button id="btn01">点击一下修改样式</button>
    <button id="btn02">读取样式</button>
    <div id="box1"></div>
</body>
</html>

2.（1）obj.currentStyle

只有IE和Opera支持currentStyle获取HTMLElement的计算后的样式，其他浏览器中使用getComputedStyle

获取元素的当前显示样式

语法：元素.currentStyle.样式名

（2）window.getComputedStyle函数

第一个参数为获取计算后的样式的目标元素

第二个参数为期望的伪元素，如':after'，':first-letter'等

注意：在Firefox中，第二个参数是必须的，如果没有期望的伪元素，就设置为null，而其他浏览器中可以省略第二个参数
下面以在谷歌浏览器上运行为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #box1{
            width:200px;
            height:200px;
            background-color: brown;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                //读取box1的宽度
                //获取元素的当前显示样式
                alert(window.getComputedStyle(box1).width);
            };
        };
    </script>
</head>
<body>
    <button id="btn01">读取样式</button>
    <br/><br/>
    <div id="box1"></div>
</body>
</html>

3.自定义getStyle方法

定义一个函数，用来获取指定元素的当前样式

     // 参数：obj:要获取样式的元素
     // name:要获取的样式名
    function getStyle(obj,name){
        if(window.getComputedStyle){
            //正常浏览器的方式，具有getComputedStyle()方法
            return getComputedStyle(obj,null)[name];
        }else{
            //IE8的方式，没有getComputedStyle()方法
            return obj.currentStyle[name];
        }

JavaScript操作样式与内联样式

猜你喜欢