Javascript 修改元素的样式 【style】【className】【addClass】【removeClass】

DOM方法一【利用style修改单个样式】

设置一个盒子

对应的css样式为

     div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

script代码：

<script>
        var div = document.querySelector("div");
        div.style.backgroundColor = 'blue';
</script>

注意背景颜色backgroundColor 采用驼峰命名法

方法二【DOM利用className改变类名修改多个样式】

    div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .show {
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }

对应script代码

    <script>
        var div = document.querySelector("div");
        div.className = 'show';
    </script>

方法三【jQuery修改元素的单个样式】

<script src="./jquery.min.js"></script>

引入jQuery文件以后

    <div>
    </div>
    <script>
        $(function () {
            $("div").css("width", "500px");
        })
    </script>

注意，dom元素是没有css方法的

也可以用传入对象的方式，修改多个样式

    $(function () {
            $("div").css({
                "width": 500,
                "height": 500,
                "backgroundColor": "red"
            });
        })

切记：1. 属性值如果是数字可以不加引号，英文必须加引号 2.属性名要加引号 3. 属性特别长的要用驼峰命名法，而background-color是dom的方法，会报错

法四【jQuery更改类名】

addClass更改类名

        $(function () {
            $("div").addClass("show");
        })

 切记：类名无需在加小点

还有删除类名，removeClass

结尾：

学习id： 201903090124-

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。