美文网首页
给dom元素添加类

给dom元素添加类

作者: 盖子pp | 来源:发表于2022-10-13 09:02 被阅读0次

在封装公用组件的时候,经常会用到动态给元素添加样式
思路:先判断这个dom有没有这个类,没有才给这个dom添加类

<body>
    <div class="a"></div>
    <script>
        function hasClass(el,className) {
            let reg = new RegExp('(^|\\s)'+className+'(\\s|$)')
            return reg.test(el.className)
        }
        function addClass(el,className) {
            if (hasClass(el,className)) {
                return
            }
            let newClass = el.className.split(' ')
            newClass.push(className)
            el.className = newClass.join(" ")
        }
        addClass(document.getElementsByClassName("a")[0],'b')
    </script>
</body>

往字符串里面添加某个字符串,先split切割成数组,把字符串push进去,再把数组join成字符串

相关文章

  • 给dom元素添加类

    在封装公用组件的时候,经常会用到动态给元素添加样式思路:先判断这个dom有没有这个类,没有才给这个dom添加类 往...

  • 原生js操作DOM元素的一些使用

    1、原生js给DOM元素添加一个类名 方法一: 使用DOM.setAttribute("class","类名") ...

  • 23.Vue封装的过度与动画

    一、过度与动画 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。 写法:准备好样式:元素进...

  • 使用vue.js写一个tab选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加a...

  • 原生js的一些兼容封装

    获取Dom元素 获取样式表里的样式 添加和移除类名 添加(优化原生防止重复添加) 移除类(优化原生防止重复添加) ...

  • HTML5 DOM元素类名添加操作API classList简介

    熟知且常用的两种给DOM元素添加类的操作就是原生js中的 className和jQuery中的addClass。...

  • Vue 中获取 DOM 元素问题

    Vue 获取DOM元素 获取元素 template 部分 js 部分 给元素添加事件 需要用到$nextTick ...

  • 2018-07-24 事件与事件委托机制

    为dom元素添加事件的方式有三种 1:直接在dom元素上,添加属性onclick,然后将一个函数赋值给这个属性即可...

  • 封装的过度与动画

    1.作用:在插入、更新、移除 DOM 元素时,在合适的时候给元素添加样式类名2.写法:(1)准备好样式:v-ent...

  • vue学习(43)动画与过度

    知识点 在插入,更新或移除DOM元素时,在合适的时候给元素添加样式类名。 图示image.png 写法准备好样式元...

网友评论

      本文标题:给dom元素添加类

      本文链接:https://www.haomeiwen.com/subject/hatxzrtx.html