原生JS给DOM元素增加修改和删除class

最新推荐文章于 2024-05-06 18:17:39 发布

月亮与六便士0520

最新推荐文章于 2024-05-06 18:17:39 发布

阅读量2.2w

点赞数 6

分类专栏： javascript 前端小技巧

本文链接：https://blog.csdn.net/qq_22896159/article/details/88390783

版权

javascript 同时被 2 个专栏收录

14 篇文章 5 订阅

订阅专栏

前端小技巧

2 篇文章 0 订阅

订阅专栏

之前一直使用jq，处理页面结构变化都很方便，不过在某些不实用jq的项目里，还是必须得知道如何使用原生JS去处理页面中简单的一些样式变化。这里介绍js针对css方面的一些基本操作。

<html lang="en" dir="ltr">
  <head>
    <style media="screen">
      .temp{
        font-size:60px;
        text-align:center;
        font-weight:bolder;
      }
      .red{
        color:red;
      }
    </style>
  </head>
  <body>
    <div class="temp" id="temp">
        hhh
    </div>
    <button type="button" name="button" onclick="change()">Change</button>
  </body>
</html>

增加class

//方法1  如果你的页面里有很多个“temp”类的话  感觉这种不太适合 “classArr ”取出的是类数组
  let classArr =  document.getElementsByClassName("temp");
 classArr[0].classList.add("red");
 
//方法2 通过ID获取
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.concat("  red");	//注意这里有空格哟
document.getElementById("temp").setAttribute("class",newClass);

修改class

let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","red");
document.getElementById("temp").setAttribute("class",newClass);

删除class

//方法1  如果你的页面里有很多个“temp”类的话  感觉这种不太适合 “classArr ”取出的是类数组
  let classArr =  document.getElementsByClassName("temp");
 classArr[0].classList.remove("red");
 
//方法2 通过ID获取
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","");
document.getElementById("temp").setAttribute("class",newClass);

月亮与六便士0520

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
原生JS给DOM元素增加修改和删除class

之前一直使用jq，处理页面结构变化都很方便，不过在某些不实用jq的项目里，还是必须得知道如何使用原生JS去处理页面中简单的一些样式变化。这里介绍js针对css方面的一些基本操作。&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;style media="screen"&gt; .temp{ font-siz..
复制链接

扫一扫

专栏目录