js-addClass,removeClass

最新推荐文章于 2022-07-21 10:08:34 发布
最新推荐文章于 2022-07-21 10:08:34 发布
阅读量2.2k 收藏
点赞数
分类专栏： js2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85880592
版权

addClass

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                addClass(oDiv,'box1');
                function addClass(obj,className){
                    //如果原来没有class
                    if(obj.className == ''){
                        obj.className = className;
                    }else{
                        //如果原来有class
                        var arrClassName = obj.className.split('');
                        var _index = arrIndexOf(arrClassName,className);
                        if(_index == -1){
                            //如果要添加的class在原来的class中不存在
                            obj.className += ' '+ className;
                        }
                            //如果要添加的class在原来的class中存在
                    }
                }
                function arrIndexOf(arr,v){
                    for(var i=0;i<arr.length;i++){
                        if(arr[i] == v){
                            return i;
                        }
                    }
                    return -1;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1" class="box">div</div>
    </body>
</html>

 

removeClass

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style>
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                var oDiv2 = document.getElementById('div2');
                removeClass(oDiv2,'box');
                addClass(oDiv,'box1');
                function addClass(obj,className){
                    //如果原来没有class
                    if(obj.className == ''){
                        obj.className = className;
                    }else{
                        //如果原来有class
                        var arrClassName = obj.className.split('');
                        var _index = arrIndexOf(arrClassName,className);
                        if(_index == -1){
                            //如果要添加的class在原来的class中不存在
                            obj.className += ' '+ className;
                        }
                            //如果要添加的class在原来的class中存在
                    }
                }
                function removeClass(obj,className){
                    //如果原来有class
                    if(obj.className != ''){
                        var arrClassName = obj.className.split(' ');
                        var _index = arrIndexOf(arrClassName,className);
                        //如果有我们要移除的class
                        if(_index != -1){
                            arrClassName.splice(_index,1);
                            obj.className = arrClassName.join(' ');
                        }
                    }
                    
                }
                function arrIndexOf(arr,v){
                    for(var i=0;i<arr.length;i++){
                        if(arr[i] == v){
                            return i;
                        }
                    }
                    return -1;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1" class="box">div</div>
        <div id="div2" class="box box1">div2</div>
    </body>
</html>

我的奋斗ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
10-25
主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
javascript自定义的addClass()方法
12-09
代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClassName+= ” “; newClassName+= value ; element.className = newClassName; } }
JS-移除class
qq_40850291的博客
04-12 5543
JS-移除class 文章目录JS-移除class移除class一、问题二、代码三、结果 移除class 一、问题 找到class为XXX的标签，然后删除这些标签对应的class 使用Element.classList的remove(),add()方法 Element.classList.add(className) Element.classList.remove(className) 二、代码 <!DOCTYPE html> <html lang="en"> <
js函数-追加新的class属性addClass()函数
Antg的博客
04-10 3607
一、代码如下 function(element,value){ if(!element.className){ element.className = value; }else{ newClassName = element.className; newClassName += " "; newClassName += value; element.className +=...
[js进阶]原生js实现addClass,removeClass,hasClass方法
SCUhzs
01-31 3055
addClass function addClass(obj, cls){ //获取 class 内容. var obj_class = obj.className, //判断获取到的 class 是否为空, 如果不为空在前面加个'空格'. blank = (obj_class != '') ? ' ' : ''; added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class. obj.className = added;//
原生js实现addClass,removeClass,hasClass方法
10-22
主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
js实现addClass,removeClass,hasClass的函数代码
10-28
在JavaScript中，`addClass`, `removeClass`, 和 `hasClass` 是三种常见的操作DOM元素类名（className）的方法。这些方法在创建交互式用户界面时非常有用，例如改变元素样式、响应事件或实现动画效果。让我们详细...
原生javascript实现addClass,removeClass,hasClass函数
10-22
主要介绍了原生javascript实现addClass,removeClass,hasClass函数的相关代码，有需要的小伙伴可以参考下
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
10-15
总的来说，jQuery的`addClass`、`removeClass`和`toggleClass`提供了强大的灵活性，使得开发者能够轻松地控制元素的CSS类，增强用户体验，提高网页的互动性。熟练掌握这些方法对于提升jQuery编程能力至关重要。
jQuery和纯js实现addClass、removeClass方法
青颜的天空的博客
08-24 2059
jQuery和纯js实现addClass、removeClass方法
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法
花开，伱不再的博客
09-16 6243
Jquery class
js实现addClass、removeClass方法
weixin_46120329的博客
07-21 1277
js实现addClass,removeClass
JavaScript给元素添加class属性
热门推荐
浪里个小胖子
04-27 5万+
注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性 obj.classList.remove('active'); // 添加class属性值 // 方式一 obj.className += 'new active'; // 方式二 // obj.className =...
用JS添加和删除class类名及相关的一些东西
penliyoushui的博客
12-23 1675
1、它可以做简单的树形结构点击高亮 基本方法 方法1. 添加：document.getElementById("id").classList.add("类名")； 删除：document.getElementById("id").classList.remove("类名")； 方法2 var classVal=document.getEleme...
js移除某个class_原生js之classList 增加、移除指定类
weixin_36479263的博客
02-26 1288
jQuery中的removeClass() 方法，移除指定类的确很方便，但是它是jQuery中的方法，原生dom是不能直接使用的。在项目中本来用的jq获取dom，但是在for循环中动态生成div，还要抓取到第i个dom，给div加固定id的话肯定不行，所以给他加了className，然后通过i，抓取第i个div。$("test")[i].removeClass("class1");以上代码，会报错...
JS之给元素添加类的方法
waillyer的博客
10-14 1375
原生js中添加类的方法 //1.为 <div> 元素添加一个类: document.getElementById("div").classList.add("类名"); //2.为 <div> 元素添加多个类: document.getElementById("div").classList.add("类名1","类名2","类名3",...); //3.为 <div> 元素移除一个类: document.getElementById("div").classList
手动封装 addClass JS 函数
lzgy的博客
11-02 174
addClass 函数 在需要给一个元素追加新的 class 时, 可以按以下步骤 : 1 , 检查 className 属性的值是否为 null ; 2 , 若是空, 把新的 class 设置值直接赋值给 className 属性 ; 3 , 若不是, 把一个空格和新的 class 设置值追加到 className 属性上. 具体函数如下: 参数1 为需要添加新的 class 属性的元素(ele...
addclass和removeclass
最新发布
03-16
addclass 指的是在 HTML 元素中添加一个或多个 CSS 类。这可以用 JavaScript 或 jQuery 实现。例如，在 JavaScript 中，可以使用 element.classList.add("className") 来添加一个 CSS 类。 removeclass 指的是在 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值