js中对元素样式进行操作

对元素样式进行操作

1.操作内联样式

通过js修改元素的样式:语法:元素.style.样式名=样式值

需要将这种样式改成驼峰命名法
去掉-,然后将-后的字母大写
我们通过style属性设置的样式都是内联样式而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
如果在样式中写了!important,则设置的样式会有最高的优先即使通过js也不能覆盖样式,此时会导致js修改的样式失效

<style>
        #box1 {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            /*
             * 点击按钮以后,修改box1的大小
             * 
             * 
             * 
             */
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //修改box1的宽度
                /*
                 * 通过js修改元素的样式
                 *  语法:元素.style.样式名=样式值
                 *      这种名称在js中是不合法的比如background-color
                 *      需要将这种样式改成驼峰命名法
                 *      去掉-,然后将-后的字母大写
                 * 
                 *  我们通过style属性设置的样式都是内联样式
                 *  而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
                 *
                 *  但是如果在样式中写了!important,则设置的样式会有最高的优先级
                 *  即使通过js也不能覆盖样式,此时会导致js修改的样式失效
                 *  所以尽量不要为样式加!important
                 */
                box1.style.width = "300px";//要是字符串""

            };
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //读取box1的样式
                /*
                 * 通过style属性设置和读取的都是内联样式
                 * 无法读取样式表(style)中的样式
                 * 
                 * 
                 */
                alert(box1.style.width);
            };
        }
    </script>
</head>

<body>
    <div id="box1"></div>
    <button id="btn01">点我一下</button>
    <button id="btn02

2.获得元素的属性样式

获取元素当前显示的样式

语法:元素.currentStyle.样式名

可以获取当前元素正在显示的样式

如果当前元素没有设置该样式,则获取它的默认值

只有ie浏览器支持

<style>
        #box1 {
            width: 200px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //alert(box1.style.width);
                /*
                 * 获取元素当前显示的样式
                 *  语法:元素.currentStyle.样式名
                 *  可以获取当前元素正在显示的样式
                 *  如果当前元素没有设置该样式,则获取它的默认值
                 *  只有ie浏览器支持
                 */
                /**
                 * 
                 * 其他浏览器中可以使用
                 * 其他浏览器中可以使用
                 * 
                 * 这个方法是window的方法,可以直接使用
                 * 需要两个参数
                 *  第一个,获取样式的元素
                 *  第二个,可以传递一个元素,一般都传null
                 * 
                 * 该方法会返回一个对象,对象中封装了当前元素的样式
                 * 可以通过对象,样式名来获取样式
                 * 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
                 * 比如:没有设置width,它不会获取到auto,而是一个长度
                 * 
                 * 但是该方法不支持ie8及以下的浏览器
                 * 
                 * 通过currentStyle和getComputedStyle()读取到的样式都只读的,不能修改,如果要改必须通过style属性
                 */
                // //正常浏览器
                // alert(getComputedStyle(box1,null).backgroundColor);
                // //ie8
                // alert(box1.ariaCurrent.backgroundColor); 
                alert(getStyle(box1, "width"));
            }
        }
        /*
         * 定义一个函数,获取指定元素当前的样式
         * 参数:
         *  obj 要获取的样式
         * 
         */
        function getStyle(obj, name) {
            //正常浏览器的方式
            return getComputedStyle(obj, null)[name];//
            //ie8的的方式
            return obj.currentStyle[name];
        }
    </script>
</head>

<body>
    <div id="box1"></div>
    <button id="btn01">按钮