DOM修改样式

var btn = document.getElementById("btn");
        var div = document.getElementsByTagName("div")[0];
        btn.onclick = function(){
            div.style.background = "pink";
            div.style.width = "300px";
            div.style.height = "300px";
        }
        //在js中通过style属性设置的样式都是内联样式，而内联样式优先级较高
        //但是在样式中写了  !important，则此时样式会有最高优先级，即使通过JS也不能覆盖该样式

        
        //读取元素样式，只要设置样式后面不赋值就可以查看
            //通过style属性设置和读取到的都是内联样式
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function(){
                div.style.background = "pink";
                div.style.width = "300px";
                div.style.height = "300px";
            }

        
            //获取元素的当前显示样式
            //语法：元素.currentStyle.样式名
            //可以读取当前正在显示的样式，但是只有IE浏览器支持
            /*
                在其他的浏览器中可以使用：
                    getComputedStyle9()这个方法来获取元素的样式
                    该方法会返回一个对象，对象中封装了当前元素对应的样式
                    可以通过    对象.样式名来读取样式
                    如果获取的样式没有设置，则会获取到真实的值，而不是默认值
                    比如：没有设置width，它不会获取到auto，而是一个长度

                    但该方法不支持IE8及以下的浏览器
            */


            /*
                定义一个函数,用来获取指定元素的当前的样式
                参数：
                    obj 要获取的元素
                    name 要获取的样式名
            */

​ 注意：
​ currentStyle和getComputedStyle()读取到的样式都是只读的，不能进行修改，如果要进行修改必须通过style属性

变量没找到：报错
属性没找到：返回undefined