JavaScript基础：操作样式(通过获取和设置style属性、className属性)

BestKagome

已于 2023-05-31 15:32:07 修改

阅读量4.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-07-08 10:54:10 首次发布

本文链接：https://blog.csdn.net/Alley_Olive/article/details/125674041

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM元素的style属性和className属性来改变其样式和类名。通过实例展示了如何设置和获取颜色、字体、背景等样式，并演示了如何动态修改多个span元素的背景色。此外，还提到了JavaScript中float属性的特殊用法，即需使用cssFloat。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：操作样式(通过获取和设置style属性、className属性)</title>
    <!--
        一、操作style属性
            1、style属性可以设置或返回样式。
            2、style设置CSS特征值时，需要把特征的  短横线命名法  改成  驼峰命名法  后使用。
            3、在JavaScript中，float是保留字，如果需要使用float特征，需要变更为cssFloat后使用。
                如： elementObject.style.cssFloat = "left";

        二、操作className属性
            1、className属性可以设置或返回元素的className值。
            如：var btnCssName = elementObject.className;    // 获取className值
                elementObject.className = "pinkCss";        // 设置className值

    -->
    <style>
        .greenyellowButton{
            width: 150px;
            height: 50px;
            color:royalblue;
            font-size: 20px;
            margin: 10px;
            background-color: greenyellow;
            border: 2px solid orange;
        }
        .pHotpink{
            color: hotpink;
            background-color: paleturquoise;
            font-size: 50px;
        }
        span{
            width: 50px;
            height: 50px;
            display: inline-block;
            text-align: center;
            padding-top: 5px;
            margin-right: 10px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <p id="p1">七龙珠里的孙悟空拥有筋斗云！</p>
    <br>
    <p id="p2">西游记里的孙悟空拥有如意金箍棒！</p>
    <br>
    <div>
        <span>赤</span>
        <span>橙</span>
        <span>黄</span>
        <span>绿</span>
        <span>青</span>
        <span>蓝</span>
        <span>紫</span>
    </div>
    <br>
    <input type="button" value="筋斗云" class="greenyellowButton" onclick="changeStyle()">
    <input type="button" value="如意金箍棒" class="greenyellowButton" onclick="changeClassName()">
    <input type="button" value="七彩祥云" class="greenyellowButton" onclick="changeSpanStyle()">
</body>
<script>
    function changeStyle(){

        // 设置段落1的style样式
        var pElementObj1 = document.getElementById("p1");
        pElementObj1.style.color = "darkviolet";
        pElementObj1.style.fontFamily = "草书";
        pElementObj1.style.fontSize = "40px";
        pElementObj1.style.backgroundColor = "bisque";

        // 注意：在JavaScript中，float是保留字，如果需要使用float特征，需要变更为cssFloat后使用
        // pElementObj1.style.cssFloat = "left";

        // 获取段落1的style样式
        var pTagColor1 = pElementObj1.style.color ;
        var pTagFontFamily = pElementObj1.style.fontFamily;
        var pTagFontSize = pElementObj1.style.fontSize;
        var pTagBackgroundColor = pElementObj1.style.backgroundColor;

        console.log("段落1的字体颜色是：" + pTagColor1);
        console.log("段落1的字体类型是：" + pTagFontFamily);
        console.log("段落1的字体大小是：" + pTagFontSize);
        console.log("段落1的背景颜色是：" + pTagBackgroundColor);

    }

    function changeClassName(){

        // 设置段落2的class样式
        var pElementObj2 = document.getElementById("p2");
        pElementObj2.className = "pHotpink";
        
        // 获取段落2的class样式
        var pTagClassName = pElementObj2.className ;

        console.log("段落2的class name是：" + pTagClassName);

    }

    function changeSpanStyle(){

        // 通过tag name获取所有span标签元素
        // 
        // 方式一：
        // var spanNodeList = document.getElementsByTagName("span");

        // 方式二：
        var spanNodeList = document.querySelectorAll("span");

        for (let i = 0; i < spanNodeList.length; i++) {

            const spanNode = spanNodeList[i];

            // 给每个span标签设置不同的背景颜色
            // 
            // 方式一：
            // 通过if...else...语句进行判断

            if(i == 0){
                spanNode.style.backgroundColor = "red";
            }
            else if(i == 1){
                spanNode.style.backgroundColor = "orange";
            }
            else if(i == 2){
                spanNode.style.backgroundColor = "yellow";
            }
            else if(i == 3){
                spanNode.style.backgroundColor = "green";
            }
            else if(i == 4){
                spanNode.style.backgroundColor = "cyan";
            }
            else if(i == 5){
                spanNode.style.backgroundColor = "blue";
            }
            else if(i == 6){
                spanNode.style.backgroundColor = "purple";
            }
            else{
                spanNode.style.backgroundColor = "hotpink";
            }

            // 方式二：
            // 通过switch...case...语句进行判断
            // switch (i) {
            //     case 0:
            //         spanNode.style.backgroundColor = "red";
            //         break;
            //     case 1:
            //         spanNode.style.backgroundColor = "orange";
            //         break;
            //     case 2:
            //         spanNode.style.backgroundColor = "yellow";
            //         break;
            //     case 3:
            //         spanNode.style.backgroundColor = "green";
            //         break;
            //     case 4:
            //         spanNode.style.backgroundColor = "cyan";
            //         break;
            //     case 5:
            //         spanNode.style.backgroundColor = "blue";
            //         break;
            //     case 6:
            //         spanNode.style.backgroundColor = "purple";    
            //         break;
            //     default:
            //         spanNode.style.backgroundColor = "hotpink";
            //         break;
            // }
            
        }
    }
    
</script>
</html>

页面初始效果：