精华内容
下载资源
问答
  • 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...

    先看两个例子:

    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");
    }

    效果:



    展开全文
  • 在我们通过jQuery添加了一个DOM元素(例如在废容器中添加一个带有class = “box”的元素),同时又要他一个点击事件,我们想的是: $(".box ").click(function(){ //这里是点击事件内部 }); 但是没有生效,...

    在我们通过jQuery添加了一个DOM元素(例如在废容器中添加一个带有class = “box”类的元素),同时又要给他一个点击事件,我们想的是:

    $(".box ").click(function(){
    	//这里是点击事件内部
    });
    

    但是没有生效,应该这样写:

    $(".box ").on('click', function(){
    	//这里是点击事件内部
    });
    
    展开全文
  • 找到需要添加或修改的元素 <div class="w-e-text"></div> var edit=document.getElementsByClassName('w-e-text')[0] edit.setAttribute('contenteditable','false'); 即可修改完成 扫码获取 ...

    找到需要添加或修改的元素的类

    <div  class="w-e-text"></div>
    
      var edit=document.getElementsByClassName('w-e-text')[0]
      edit.setAttribute('contenteditable','false');
    

    即可修改完成

    扫码获取 1000+条 前端面试题 收藏以后面试用得上

    在这里插入图片描述

    展开全文
  • 1 遍历元素 jQuery 隐式迭代是对同一元素做了同样的操作。如果想要同一元素做不同的操作,就需要用到遍历。 语法1: $("div").each(function(index,...domEle是每个DOM元素对象,不是jquery对象 所以要想...
  • javascript操作DOM元素

    2015-07-17 15:14:11
    1)HTMLElement的元数据属性: checked——获取或设置checked属性是否存在; classList——获取或设置元素... classList.add()——给元素添加指定的;  classList.contains()——如果元素属于指定的就返回true;
  • 1、使用元素对象 HTMLElement对象提供了一组属性,你可以用它们来读取和修改被代表元素的...给元素添加指定的 void contains(class) 如果元素属于指定的就返回true 布尔值 length 返回元素所属的数量 数值
  • 比如,让我们假设,我们想要所有的外部链接添加一个。jquery对这种场景并没有一个选择器。在没有一个过滤方法的情况下,我们将强迫显式循环遍历每一个元素,分开测试每一个元素。然而通过使用下面的过滤函数,...
  • 在网页开发中一个元素的鼠标悬停样式常常由伪:hover来控制,而当我们用js生成一个DOM元素时想要添加hover样式的话就显得比较麻烦,常规方法是先添加一个类名,然后往页面中新增一个style便签,标签内定义...
  • 通过CSS的属性选择器 选择元素 [class^="van-icon van-icon-demo-icon-"] { background-repeat: no-repeat; background-size: contain; width: 25px;...属性的判断条件需要参考最终的dom元素 ...
  • DOM 踩踩踩

    2018-01-10 17:38:00
    1.如果是想一个DOM元素添加一个伪,可以转换为 为这个元素添加一个类名,这个类名上面绑定一个伪。 2.append一个元素,删除掉原来的元素再进行添加。 转载于:...
  • 元素跟伪的区别

    2021-03-22 20:00:30
    的效果可以通过添加一个实际的来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪,一个称为伪元素的原因。 用伪元素的好处是你可以用伪元素制造视觉上的效果,但是...
  • 元素class类名的添加和删除之classList

    千次阅读 2018-11-20 15:24:40
    本文要介绍的HTML DOM classList是也可用于给元素添加、移除或切换class属性。 classList的基本使用: 一、语法: element.classList 返回的是一个DOMTokenList数组对象。 二、属性: length 返回列表中的...
  • 前言 之前就在vue文档中看到这样的效果,在代码块的右上角会显示代码种类(javaascript, css等),如下图所示 ...其中content可以通过调用attr() 方法获取到某个伪所属dom元素的属性值。 举个例子 &lt;!...
  • # dom 基础

    2020-07-01 22:46:57
    什么是dom DOM --> Document Object Model DOM 定义了表示和修改文档所需的方法。DOM 对象即为宿主对象,由浏览器厂商定义,用来操作 html 和 XML 功能的一...DOM 不能操作css 但是可以通过html 元素 添加内置
  • 首先等到一个 dom 对象(也叫dom元素), 通过document.getElement……的几种方法得到 如` let element = document.getElementById("box"); 1.通过类名, 获取类名: el.className, 赋值: el.className = ...
  • 原生JS动态添加和删除 由于需要, 按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时...首先等到一个 dom 对象(也叫dom元素), 通过document.getElement……的几种方法得到 如` let element = documen...
  • 和伪元素区别

    2019-08-19 22:50:47
    和伪元素的区别,其实很简单,从字面上就可以理解。...css2中的定义 css伪用于某些选择器添加特殊的效果 css3中的定义:伪存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器...
  • 元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,通过JS,也抓取不到伪元素,也不能它绑事件,但是会存在于最终的渲染树中,我们可以为其添加样式。 伪是使用单冒号:伪元素使用双冒号::。 伪元素...
  • :hover, 当鼠标悬停在一个元素上时,可以用这个伪来为此状态下的元素添加样式。很明显,鼠标悬停在一个元素上的这些信息,并不存在与dom树中。 :first-child , 要获取第一个子元素,无法通过常规选择器直接获取,...
  • 例如 :hover,当用户悬停在指定元素时,可以在这个状态指定元素添加相应的样式,是在 DOM 树无法描述的状态下才能给元素添加样式。 首先,下方的正方形都没有背景色: 1、:first-child :first-...
  • 我们再它一个: 在这三个div里面添加元素,我们可以怎么添加呢? 我们可以用js里面的innerHTML进行添加: var box = document.getElement(“box”); //document.createElement("标签名称") 创建元素节点 ...
  • jQuery的元素操作

    2020-06-16 19:18:47
    jQuery元素操作 主要是遍历,创建,添加,删除元素操作 遍历元素 注意:jQuery隐式迭代是对同一元素做了同样的操作。如果想要同一元素做不同操作,就需要...所以要想使用jQuery方法,需要这个dom元素转换成jqu
  • 修改元素样式

    2018-03-10 23:00:23
    一、修改元素样式通过给元素添加或移除来改变元素样式1、jquery对象.addClass(class/function(index,currentClassName){}):jquery对象中的每一个DOM元素都可添加相同的指定一个或多个2、jquery对象.removeClass...
  • jquery元素操作

    2020-12-25 23:35:53
    1、jquery元素操作主要是遍历、创建、添加、删除元素操作。 1.1、遍历元素 jquery 隐式迭代是对同一元素做了同样的操作。如果想要同一元素做不同操作...domEle是每个DOM元素对象不是jquery对象 3.所以要想使用jq
  • jQuery元素操作

    2020-02-26 16:22:17
    主要是遍历、创建、添加、删除元素操作 一、遍历元素 jQuery隐式迭代是对同一元素做了同样的操作,如果想要同一元素做不同操作,就要...2、里面的回调函数有2个参数:index是索引号,domEle是每个DOM元素对象...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 247
精华内容 98
关键字:

给dom元素添加类