精华内容
下载资源
问答
  • 原生js给DOM元素添加、删除类名
    2022-02-25 15:50:47

    方法一:

    DOM.className = '类名';

    说明:一次只能设置一个类值,如果当前属性本身存在类值,会被替换。

    方法二:

    DOM.setAttribute("class", "类名")
    
    DOM.removeAttribute("class", "类名")

    说明:setAttribute用于创建或改变某个新属性,如果指定属性已经存在,则只设置该值并且会替换原来的值。

    方法二:

    DOM.classList.add('类名一', '类名二', '类名三'); // 添加一个或多个类名
    
    DOM.classList.remove('类名一', '类名二', '类名三'); // 删除一个或多个类名
    
    DOM.classList.toggle('类名'); // 切换类名

    说明:

    add() - 往类属性内添加类值,可以一次添加多个类值,如果当前类属性存在多个类值,不会清除替换原有的类值。

    remove() - 移除类列表内的类值,可以一次移除多个。

    toggle() - 判断元素类列表内有没有某个类名,有则移除,没有则添加(切换效果),如果类属性存在多个类值,添加时不会清除替换原有的类值。

    记录于2022-2-25

    参考:javaScript 添加和移除class类名的几种方法 - 有火光 - 博客园

    更多相关内容
  • unigrid添加html5 dom元素.rar
  • dom怎么给元素添加类样式When you have a DOM element reference you can add a new class to it by using the add method: 当您拥有DOM元素引用时,可以使用add方法向其添加新类: element.classList.add('...

    dom怎么给元素添加类样式

    When you have a DOM element reference you can add a new class to it by using the add method:

    当您拥有DOM元素引用时,可以使用add方法向其添加新类:

    element.classList.add('myclass')

    You can remove a class using the remove method:

    您可以使用remove方法删除一个类:

    element.classList.remove('myclass')

    Implementation detail: classList is not an array, but rather it is a collection of type DOMTokenList.

    实现细节: classList不是数组,而是DOMTokenList类型的集合

    You can’t directly edit classList because it’s a read-only property. You can however use its methods to change the element classes.

    您不能直接编辑classList因为它是只读属性。 但是,您可以使用其方法来更改元素类。

    翻译自: https://flaviocopes.com/add-class-to-dom-element/

    dom怎么给元素添加类样式

    展开全文
  • document.getElementsByClassName(...)捕捉到的是该元素的数组 正确的访问方式应该是: document.getElementsByClassName(...)[0].addEventListener... 使用遍历为每个class添加监听: var classObj = document....

    先看两个例子:

    html:

    <div class="test" id="test">
     啦啦啦
    </div>

    css:

    .test{
      width: 100px;
      height: 100px;
      background: #B6BAC4;
    }
    .test1{
      border: 1px solid;
      width: 200px;
      border-radius: 4px;
    }
    .test2{
      margin: 0 auto;
    }
    .test3{
      font-size: 50px;
    }

    js:

    // 覆盖原来的样式
    document.getElementById("test").setAttribute("class","test1");
    var dom=document.getElementsByClassName("test")[0].setAttribute("class","test1");
    // 追加样式不覆盖原来的样式
    document.getElementById("test").classList.add("test1");
    document.getElementById("test").classList.add("test1","test2","test3");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1");
    var dom=document.getElementsByClassName("test")[0].classList.add("test1","test2","test3");

    效果:

    覆盖

    不覆盖:

    追加多个样式:

    注意所有的都必须要在DOM获取到的前提下用

    其次:再用类名获取DOM的时候会报错:

    常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

    原因:document.getElementsByClassName(...)捕捉到的是该类名元素的数组
    正确的访问方式应该是:
    document.getElementsByClassName(...)[0].addEventListener...
    使用遍历为每个class添加监听:
    var classObj = document.getElementsByClassName(...);
    for(i=0;i<classObj.length;i++){
    classObj[i].addEventListener...
    }
    所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换
    移出一个
    dom.classList.remove("className1");
     
     

    移除多个类:

    dom.classList.remove("className1", "className2", "className3", ....., "classNameN");
    
    

    检查是否含有某个类

    dom.classList.contains('className'); //return true or false

     
    一个综合应用就是给一组类名相同的DOM追加一个或多个相同的样式
     
    
    效果:

    html:
    <ul>
        <li class="test" id="1" >111</li>
        <li class="test" id="2" >111</li>
        <li class="test" id="3" >111</li>
        <li class="test" id="4" >111</li>
    </ul>
    css:
    .test{
      width: 100px;
      height: 100px;
      background: #B6BAC4;
    }
    .test1{
      border: 1px solid;
      width: 200px;
      border-radius: 4px;
    }
    .test2{
      margin: 0 auto;
    }
    .test3{
      font-size: 50px;
    }
    js:
     var dom=document.getElementsByClassName("test");
    for(var i=0;i<dom.length;i++){
        dom[i].classList.add("test1");
    }

    展开全文
  • 这里我想到了2个方法: 方法一: 直接相应的元素加id,然后再document.getElementById(“id”);...如果子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...Do.
    <!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>
        
    </head>
    <body>
        <ul id="ulRef">
            <li class="test1 test2"><span>我是标题我是标题我是</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
            <li class="test1 test2"><span>我是标题</span></li>
        </ul>
        <script>
             function addClass(el,className){
                    if(hasClass(el,className)){
                        return
                    }
                    let newClass=el.className.split(' ')
                    newClass.push(className)             
                    el.className= newClass.join(' ')
    
    
                }
            function hasClass(el,className){
                let reg=new RegExp(`(^|\\s)${className}(\\s|$)`)
                return reg.test(el.className)
            }
    
            let lis=document.getElementById('ulRef').children
            for(el of lis){
                addClass(el,'test3')
            }
            
        </script>
        
    </body>
    
    </html>

    展开全文
  • vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 “set” ref=“up”> .set是我们要操作的dom对象,它的ref是 up @click=“Alert” 父元素一个点击事件, 接下来我们来编写这个...
  • 主要介绍了jQuery添加删除DOM元素方法,结合实例形式较为详细的分析讲述了jQuery关于DOM元素节点的添加与删除相关技巧,需要的朋友可以参考下
  • 1 获取DOM元素 const domele = dom.getBody().querySelectorAll(dataMceClass) 2 遍历你想要添加点击事件的元素 for (var j = 0; j < ss.length; j++) { if (ss[j].attributes[0]?.value === 'finding' || ...
  • Vue给DOM元素添加事件的特殊情况

    千次阅读 2020-03-12 21:48:14
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...script type="text/javascript"src="../vue/dist/vue.min.js">&l...
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享大家,也大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了在vue中获取dom元素内容的方法,可以通过标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • JS-CSS-基于类的验证 通过向 DOM 元素添加类来创建表单验证
  • Vue-14-给DOM元素添加事件的特殊情况

    千次阅读 2020-05-26 15:42:13
    一、知识点部分 $nextTick():基于更新后的视图来搞点事情,我们可以使用$nextTick(callback)。这里的回调函数(callback)将在数据...如果要在created()钩子函数中进行的DOM操作,由于created()钩子函数中还未对DOM
  • 主要介绍了JavaScript DOM元素常见操作,包括针对dom元素添加、删除、修改等相关操作实现技巧与注意事项,需要的朋友可以参考下
  • 给dom元素添加事件的监听

    千次阅读 2019-02-23 10:28:10
    一、addEventListener给dom元素添加事件的监听有两种方式 1.用匿名函数方式添加事件的监听 例 &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;...
  • 在我们实际的项目之中,相信有很多的朋友直接使用了以下的格式创建DOM元素
  • 主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
  • 1.Dom元素的获取 document.getElementById():通过id获取一个Dom元素 document.getElementsByClassName():通过class名字获取一个或多个Dom元素(伪数组) document.getElementsByTagName():通过标签名字获取一...
  • JavaScript/DOM - 新创建的元素添加ID

    千次阅读 2021-06-13 07:32:31
    JavaScript/DOM - 新创建的元素添加ID我写的代码创建了一个由按钮触发的表。我需要为此表应用一个唯一的ID,因此它可以与我的网站上出现的其他人的样式不同。这里是我的代码示例:var tab = document....
  • 动态添加dom元素,并绑定vue事件

    千次阅读 2020-12-19 21:51:45
    背景:后管系统配置一个产品后,前端(vue.js框架)取到这些产品信息并展示出来,产品经理要求在文本内容中添加链接。例如:本保险不承保前往处于战争状态或已被宣布为紧急状态的国家或地区,最新信息以登陆...
  • 本篇文章主要是对jquery获取dom固定元素 添加样式的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • 计算 DOM 元素的 CSS 属性和位置。 由欧洲维也纳的 ( ) 开发。 安装 你可以从安装domcss.js : $ npm install domcss.js 用法 如果您(几乎)对每个 CSS 属性都感兴趣: var domCSS = new DomCSS ( ) ; 但是,...
  • Vue 获取DOM元素DOM增加事件的特殊情况 标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom',{ template:`<div class="subCom"></div>` }) ...
  • 一个用于处理DOM元素类的小型库。 可用于获取,检查,删除,添加和切换名称。 通过npm安装: $ npm install dom-class-helper --save API: addClass需要dom元素和类名。 返回true / false,这取决于是否添加...
  • vue, js 传递自身DOM元素,并添加class名称 element.classList.add('yourClass') 具体VUE示例如下: 1: vue 元素传递了本身 <p class="answer" @click.once="chooseFn($event.target)">{{ item.item1 }}<...
  • js为dom元素添加class名

    千次阅读 2019-03-27 23:34:33
    代码如下: <div class="aa bb cc" id='name'></div> <script type="text/javascript">... function addClass(el, className){ if(hasClass(el, className)){ ... var newClass = el...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 236,490
精华内容 94,596
关键字:

给dom元素添加类