dom的css操作，js操作css,classList的使用

usrname为username

已于 2022-09-22 14:38:52 修改

阅读量173

点赞数

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

于 2022-09-22 14:38:37 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126991567

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习链接：
【前端经典】dom的css操作，js操作css,classList的使用，网页设计与制作，前端开发。

原代码如下：

<!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>Document</title>
    <style>
        .test{
            width: 100px;
            height: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <button id="bt">测试</button>
    <!-- 前三种下一行都是box，第四种是test,返回类的个数时则是test ww aa jk-->
    <div class="test ww aa jk"></div>

    <script>
        // 第一种写法,下一行为前三种，.box
        // var ebox=document.querySelector(".box");
        //第四种写法，.test
        var ebox=document.querySelector(".test");
        var ebt=document.getElementById('bt');
        // ebox.style.background='red';
        // ebox.style.width='200px';
        // ebox.style.height='200px';
        // 或者可以这么写
        // var eboxcss=ebox.style;
        // eboxcss.background='red';
        // eboxcss.width='200px';
        // eboxcss.height='200px';
        // 第二种写法,相当于直接写在class内部
        // ebox.setAttribute('style','background:yellow;width:200px;height:200px')
        // 第三种方法
        // ebox.style.cssText='background:orange;width:200px;height:200px';
        // 第四种方法
        // 添加样式
        ebt.onclick=function(){
            // 添加和删除样式都可以是多个
 // ebox.classList.add('test','aa');
        // 删除样式
        // ebox.classList.remove('test');
        // 判断是否存在该样式，并返回一个布尔值
        // ebox.classList.contains('test');
        // alert(ebox.classList.contains('test'));
        // 切换，无则添加，有则删除
        // ebox.classList.toggle('test');
        // 返回class类的个数
        // alert(ebox.classList.length);
        // 通过下标获取class名
        // alert(ebox.classList.item(2));
        }
       

    </script>
</body>
</html>