js操作内联属性和获取当前属性_内联联系属性-CSDN博客

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109482562

dom修改内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

    <script>
        window.onload = function () {
            /**
             * 点击按钮修改box的大小
             */
            //获取box1
            let box1 = document.getElementById("box1");
            //为按钮绑定单击响应函数
            let btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
              //修改box1宽高度
                /**
                 * 通过js修改元素样式：
                 * 语法：元素.style.样式名=样式值；
                 * 如果css属性名中含有-符号，在js中是不合法的
                 * 会认为是减号，采用驼峰命名法，去掉-符号将-号后边单词首字母大写
                 * 通过该方式修改的是内联样式，内联样式有较高的优先级，
                 * 所以通过js修改内联样式会立刻执行
                 * 如果css中样式中写了!important，该样式有最高优先级，即使通过js也无法修改。
                 * css中尽量少使用
                 * 通过style属性读取和设置的都是内联样式
                  */
                box1.style.width = "50px";
                box1.style.height = "50px";
                //修改背景颜色
                box1.style.backgroundColor = "skyblue";

            };
        };
    </script>

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

dom获取元素当前样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素样式</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

    <script>
        window.onload = function () {
            /**
             * 点击按钮修改box的大小
             */
                //获取box1
            var box1 = document.getElementById("box1");
            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                /**
                 * currentStyle属性
                 * 获取元素当前样式
                 * 语法： 元素.currentStyle.样式名
                 * 他可以读取当前元素正在显示的样式，（不是内联也不是样式表的）
                 *只有ie支持，可惜
                 */
                //let width1= box1.currentStyle.width;
                /**
                 * 其他浏览器中可以使用
                 *      getComputedStyle()这个方法来获取当前样式
                 *      参数：
                 *      1.第一个参数要获取的元素
                 *      2.第二个，可以传递一个伪元素，一般都传null
                 *      该方法返回了一个对象，对象封装了当前元素对应的属性
                 *      对象.样式名
                 *      如果获取的样式没有设置，则会获取真实值，而不是默认值
                 *      比如css和内联样式都没设置width ，currentStyle会获取auto(自动)
                 *      而这个getComputedStyle会获取实际的px
                 *      这个方法是window的方法
                 *      ie8及以下不支持。
                 */
                //let obj = getComputedStyle(box1,null);
                //console(obj.width);
                /**
                 * 这两个方法读取样式都是都是只读，不能修改
                 * 如果想要修改还是要使用style属性
                 * 兼容ie8和其他浏览器同时可以使用的函数
                 * 参数：
                 *      obj 要获取样式元素
                 *      name 要获取的样式名
                 *
                 */
                var w = getStyle(box1, "width");
                alert(w);

                function getStyle(obj, name) {
                    /**
                     * 对象.属性和对象[属性]的区别
                     * .一般作为静态存取属性使用，[]一般作为动态存取属性时使用
                     * [name],name可以是字符串变量，它会直接去name变量中寻找属性
                     * .name,只会静态的查找叫name的属性
                     */
                    if (window.getComputedStyle) {
                        /*如果只写getComputedStyle，会先在函数内找这个变量，没有就去全局找
                        * 这个变量，而window是一个对象，
                        * 添加对象，getComputedStyle就变成一个属性了
                        */
                        //正常浏览器的方式，具有getComputedStyle（）方法
                        return getComputedStyle(obj, null)[name];
                    } else {
                        //ie8的方式，有currentStyle属性
                        return obj.currentStyle[name];
                    }
                    // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
                }

            };
        };
    </script>

</head>
<body>
<div>
    <button id="btn01">点我一下</button>
</div>
<div id="box1" style="width: 200px">
</div>
</body>
</html>

注意点：

1.ie9及以下支持es6语法，let不能用

2.getComputedStyle()是方法，currentStyle是属性,都只能读，不能改。要改就只能.style.属性修改.

3.对象[name]和对象.name区别，加[]name可以是变量名，里边是字符串，传参要加引号“name”，.name就是一个固定属性

4.就算是window对象属性，放在if判断时也不能省略window，否则会当成变量，其他对象也是。