JavaScript学习笔记——设置元素样式

style属性

通过style属性修改样式

在这里插入图片描述
获取属性后查看style属性下的值可以和css属性一致

    <div id="d1">hello</div id="d1">
    <div id="d2">world</div>

	<script>
        var d1 = document.querySelector("#d1");
        var d2 = document.querySelector("#d2");
        
        console.log([d1]);

        //修改属性
        d1.style.height = "200px";
        d1.style.weight = "200px";
        d1.style.background = "blue";
    </script>

在这里插入图片描述
注意：

通过直接设置style属性的值，优先级是最高的，因为是直接修改标签的style属性
设置属性的时候，如果css属性是由多个单词组成，那么js中就需要使用驼峰命名的形式进行调用和设置

className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .d1{
    
    
            width: 200px;
            height: 200px;
            background: purple;
        }
    </style>
</head>
<body>
    <div id="d1">hello</div id="d1">
    <div id="d2">world</div>
    
    <script>
        var d1 = document.querySelector("#d1");
        var d2 = document.querySelector("#d2");

        //修改属性
        d1.className = "d1"; //可以添加多个类名，用空格连接
    </script>
</body>
</html>

在这里插入图片描述

classList

通过classList属性的add/remove/replace方法进行修改

	xx.classList.add("class1");
	xx.classList.remove("class1");
	xx.classList.replace("class_before","class_after");

在这里插入图片描述

style标签

通过添加 style，然后改变style便签内的内容来添加样式

    <div id="d1">hello</div id="d1">
    <div id="d2">world</div>

    <script>
        var d1 = document.querySelector("#d1");
        var d2 = document.querySelector("#d2");

        var d2Style = document.createElement("style");

        //修改属性
        d2Style.innerHTML = `
            #d2{
                width: 200px;
                height: 200px;
                background: purple;
            }
        `
        var body = document.querySelector("body");

        body.appendChild(d2Style);
    </script>

在这里插入图片描述

JavaScript学习笔记——设置元素样式

style属性

className

classList

style标签

猜你喜欢