WebAPI中className与classList的区别

最新推荐文章于 2024-03-15 16:56:39 发布

Wyyyy1024

最新推荐文章于 2024-03-15 16:56:39 发布

阅读量411

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44389562/article/details/111564285

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

className

webapi中通过className更改元素样式

在style标签中重新定义一个新的样式
在js中直接引用：获取的元素.className=’’;

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .size{
      font-size: 30px;
    }
  </style>
<body>
  <div class="box">123</div>
</body>
<script>
 const box= document.querySelector('.box') //获取dom元素
 box.onclick=function(){
   this.className='size'
 }
</script>

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

ClassList

element.classList.add() 增加类
element.classList.remove() 删除类
element.classList.toggle() 切换类
element.classList.contains() 判断是否包含某个类，返回true/false

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .size{
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="box">123</div>
</body>
<script>
 const box= document.querySelector('.box') //获取dom元素
box.classList.add('size')
</script>

注意:

classList不会覆盖类名，在原有的类名上添加上另一个类名

Wyyyy1024

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebAPI中className与classList的区别

classNamewebapi中通过className更改元素样式在style标签中重新定义一个新的样式在js中直接引用：获取的元素.className=’’; <style> .box{ width: 100px; height: 100px; background-color: pink; } .size{ font-size: 30px; } </style><body
复制链接

扫一扫

专栏目录