JS — 03 样式操作与属性操作2-CSDN博客

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106697971

通过classList代替className操作名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
        .nav{
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .red{
            color: red;
        }
        .bold{
            font-size: 50px;
            font-weight: bold;
        }
        /*toggle小案例的CSS样式*/
        .box{
            width: 200px;
            height: 100px;
            margin: 50px 20px;
            background-color: pink;
            color: #fff;
            font-size: 30px;
            transition: 0.5s linear height;
        }
        .container{
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="wrap" class="nav">红色放大加粗</div>
    <div id="content" class="box">toggle案例</div>
    <script>
        /***************************************************************/
        //修改class名
        let wrap = document.getElementById("wrap");
        //通过className修改 => 可以修改,但是比较生硬,不推荐使用
        //wrap.className += " red bold";

        //通过classList代替className操作名字
        wrap.classList.add("red","bold");//添加类名,多个类名用逗号隔开.
        wrap.classList.remove("nav");//删除类名.
        wrap.classList.toggle("red");//有这个类名则删除,没有则添加. => 杠精操作

        //toggle小案例 => 用于在两种状态中切换
        let box = document.getElementById("content");//通过ID获取元素
        box.onclick = function(){
            box.classList.toggle("container");
        };
    </script>
</body>
</html>

在这里插入图片描述
案例效果图：

获取元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
</head>
<body>
    <div id="nav">
        <p>p1</p>
    </div>
    <div class="gd">11</div>
    <div class="gd">22</div>
    <div class="gd">33</div>
    <p>p2</p>
    <input type="text" name="username">
    <script>
        /*
        *   获取元素的方法
        *       document.getElementById("id名");
        *       document.getElementsByClassName("class名");
        *       document.getElementsByTagName("标签名");
        *       document.getElementsByName("name属性");
        *       document.querySelector("选择器"); => 获取选择器选择的对应的第一个元素
        *       document.querySelectorAll("选择器"); => 获取选择器选择的对应的所有元素
        * */

        //通过ID获取元素
        let nav = document.getElementById("nav");
        console.log( nav );
        nav.id = "wrap";//修改ID名

        //通过className获取元素
        let gd = document.getElementsByClassName("gd");//获取到的是标签集合 => HTMLCollection (类数组)
        console.log( gd );
        //通过 变量名[] 来操作元素属性,因为getElementsByClassName获取元素的方法获取的是标签集合,必须用下标来找到对应元素进行别的属性的添加
        gd[0].id = "box";
        gd[1].title = "我是第二gd";

        //通过标签获取元素
        let tag = document.getElementsByTagName("div");//获取到的是标签集合 => HTMLCollection (类数组),操作方法和上述相同
        console.log( tag );

        //通过name获取元素
        let input = document.getElementsByName("username");//获取到的是节点列表 => NodeList (类数组),操作方法和上述相同
        console.log( input );

        //只想获取#nav里面的p标签
        //方法一 => 从某个节点开始获取某个元素
        let d = document.getElementById("wrap");//上面已经把id名修改为了wrap,原本的id名被覆盖
        let p1 = d.getElementsByTagName("p");
        let p2 = document.getElementById("wrap").getElementsByTagName("p");//链式操作,先获取wrap节点,在通过wrap获取p标签
        console.log( p1 );

        //方法二
        let p3 = document.querySelector( "#wrap p" );//获取单个节点 => 获取选择器选择的对应的第一个元素
        console.log( p3 );

        //方法三
        let p4 = document.querySelectorAll( "#wrap p" );//获取多个节点 => 获取选择器选择的对应的所有元素 => NodeList(节点列表) => 用变量名[下标]分别获取对应的元素
        console.log( p4 );
    </script>
</body>
</html>

在这里插入图片描述

操作元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
        #nav{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="nav"></div>
    <script>
        //操作元素的样式
        let oNav = document.getElementById("nav");
        document.onclick = function(){//点击页面时,#nav的背景色为红色
            console.log( oNav.id );//打印结果 => nav => 数据类型:String
            console.log( oNav.className );//打印结果 => 空字符串
            console.log( oNav.style );//打印结果 => CSSStyleDeclaration => Object => 存储的是行内样式的对象集合,不是这个元素的所有样式
            oNav.style = "background-color:red;";//不合理的写法 => 类型不一致
            oNav.style.width = "200px";
            oNav.style.backgroundColor = "#58a";
            oNav.style.cssText += "height:200px;transition:0.5s linear height;";
            //优先使用修改classList去给元素添加样式(最简单的方法)
        };
    </script>
</body>
</html>