原生JS操作DOM元素的类名class

QLQ 发布于2019-08-29 17:28 / 1444人阅读

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。

1.classList

详见MDN Element.classList

add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass )
用一个新类替换已有类。

IE10+仅有限兼容，不支持SVG元素，不支持 toggle(), 多参数的add()和remove(), 以及replace()

2.className + 字符串操作

    var classValue = element.className;
    //加上空格, 不然想查询"abc"，若原本有"abcd"的类名的就会有问题
    classValue = " " + classValue + " ";
    //查询
    classValue.indexOf(" yourClassName ") === -1 ? false : true;//同样的查询时也要带上空格*2
    //增加
    classValue += " yourClassName";//注意空格*1
        //或
    classValue = classVal.concat(" someClassName");//注意空格*1
    element.setAttribute("class", classValue);
    //删除
    classValue = classValue.replace(" yourClassName "," ");//注意空格*3
    element.setAttribute("class",classValue );
    //修改
    classValue = classValue.replace(" targetClassName "," yourClassName ");//注意空格*4
    element.setAttribute("class",classValue );

3.className + 正则

和上面的方法一样，只是空格换成了正则判断

    var element = document.querySelector("#yourId");
    //查询
    function hasClass( element,yourClassName ){
    return !!element.className.match( new RegExp( "(s|^)" + yourClassName + "(s|$)") );
    // ( s|^ ) 判断前面为空格或起始 （s | $ ）判断后面为空格或结束 两个感叹号为转换为布尔值 以方便做判断
    };
    //增加
    function addClass( element,yourClassName ){
    if( !hasClass( element,yourClassName ) ){
    element.className += " " + yourClassName;
    };
    };
    //删除
    function removeClass( element,yourClassName ){
        if( hasClass( element,yourClassName ) ){
            element.className = element.className.replace( new RegExp( "(s|^)" + yourClassName + "(s|$)" )," " );
        };
    };

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114344.html

原生JS操作DOM元素的类名class

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。 1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( N...

liujs 2019-08-23 13:51 评论0 收藏0
原生JS操作DOM元素的类名class

摘要：如果这些类已经存在于元素的属性中，那么它们将被忽略。删除指定的类值。按集合中的索引返回类值。用一个新类替换已有类。 1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( N...

lemanli 2019-08-02 12:08 评论0 收藏0
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

摘要：什么是，文档对象模型。是万维网联盟的标准，定义了访问和文档的标准。在的标准中，是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容结构和样式。获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。什么是DOM? DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。...

toddmark 2019-08-23 12:00 评论0 收藏0
AngularJS简述

流行框架简介 angularjs是一款非常优秀的前端高级JS框架，由谷歌团队开发维护，能够快速构建单页web应用，化繁为简无论是angularjs还是jQuery都是用原生JS封装的库：对代码进行封装，调用封装的方法，简化操作传统方式是用get方式获取元素，然后点方法 jQuery库实现了对获取方式的封装，对方法的封装框架：提供代码书写规则，按照规则去写代码，框架会帮我们实现响应的功能...

Jason 2019-08-23 11:25 评论0 收藏0
JavaScript DOM节点简介

摘要：如果传递的参数是，将递归复制当前节点的所有子孙节点。的话只复制当前节点。设置内容时，能将里面的标签渲染成正常的标签。 DOM由节点组成在 HTML DOM （文档对象模型）中，每个部分都是节点：文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点注释是注释节点 1．重要节点类型：标签(元素)节点，属性节点，文本节点。 2．重要...

silvertheo 2019-08-02 14:00 评论0 收藏0