原生js对类名的操作

最新推荐文章于 2024-04-17 16:47:52 发布

想到山顶看风景

最新推荐文章于 2024-04-17 16:47:52 发布

阅读量828

点赞数

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

本文链接：https://blog.csdn.net/jier_jier/article/details/106290925

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生js对类名的操作

今天做一个demo的时候，忽然忘记了对Dom节点的类名操作，想记录下来，让自己能记忆更深刻一些。

语法

添加类名：Dom.classList.add(classname)

移除类名：Dom.classList.remove(classname)

切换类名：Dom.classList.toggle(classname)

code示例

html:

<button id="change_red">变为红类</button>
<button id="change_green">切换绿类</button>
<button id="remove_red">移除红类</button>
<div id="target_div"></div>

css:

<style>
    body {
      margin: 0;
      padding: 0;
    }

    #target_div {
      width: 500px;
      height: 500px;
      filter: drop-shadow(0 0 4px #000);
      background-color: #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .red {
      background-color: #f00!important;
    }

    .green {
      background-color: #0f0!important;
    }
  </style>

js:

<script>
    // 类名的操作可以通过以下方式进行操作
    // dom.classList.add(classname)      ————添加类名
    // dom.classList.remove(classname)   ————移除类名
    // dom.classList.toggle(classname)   ————切换类名

    // dom的id可以直接作为对象来使用，这里不单独获取了
    // 点击事件

    // 操作变红的按钮👇
    change_red.addEventListener('click', function () {
        // 先将目标div的class列表变为空
        target_div.classList = ''
        // 为列表添加red类名
        target_div.classList.add('red')
        console.log(target_div.classList,target_div);
    })
    // 操作切换绿色的按钮👇
    change_green.addEventListener('click', function () {
        target_div.classList.toggle('green')
        console.log(target_div.classList,target_div);
    })
    // 操作移除红色的按钮👇
    remove_red.addEventListener('click',function () {
        target_div.classList.remove('red')
        console.log(target_div.classList,target_div);
    })
</script>

效果：

// 自己试试吧
// 需要注意<script>标签的位置，最好放在<body>的底部

想到山顶看风景

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js对类名的操作

原生js对类名的操作今天做一个demo的时候，忽然忘记了对Dom节点的类名操作，想记录下来，让自己能记忆更深刻一些。语法添加类名：Dom.classList.add(classname)移除类名：Dom.classList.remove(classname)切换类名：Dom.classList.toggle(classname)code示例html:<button id="change_red">变为红类</button><button id="change_
复制链接

扫一扫