JavaScript给元素添加class属性

水深无声 2022-02-13 10:57 579阅读 0赞

注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容

// 移除div的class属性
    obj.classList.remove('active');
          
    // 添加class属性值
    // 方式一
    obj.className += 'new active';
    
    // 方式二
    // obj.className = 'new active';
    
    // 方式三：属性值不能有空格，例如'new active'
    // obj.classList.add('newActive');

1、执行`obj.classList.remove('active');`移除原先的class属性  
![在这里插入图片描述][20190427201420514.png]  
2、添加新的class属性  
![在这里插入图片描述][2019042720160123.png]  
3、有空格的情况下执行`obj.classList.add('new active');`会报错  
![在这里插入图片描述][20190427204217888.png]  
改成`obj.classList.add('newActive')`可以正常执行  
![在这里插入图片描述][20190427204329655.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]

[20190427201420514.png]: /images/20220213/1566b326d42e43cea3ce35c02d13c25e.png
[2019042720160123.png]: /images/20220213/d5b66ee1b6a04e579270ef2e9e7ee842.png
[20190427204217888.png]: /images/20220213/b8396d5fafbe447d99bb309f9eef9d78.png
[20190427204329655.png]: /images/20220213/39ddea7834b94b5596c3eb12c5071ffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]: /images/20220213/62d270480246404296cfaf7c5d411997.png

发表评论取消回复

表情：

评论列表（有 0 条评论，579人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery怎样给元素添加类class 怎样移除元素的类名 class呢

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

待我称王封你为后i/ 2024年04月18日 10:06/ 0 赞/ 73 阅读

相关 CSS给元素添加背景色

`background-color`属性可以设置元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。 ![在这里插入图片描述][f8e65e54

╰+攻爆jí腚メ/ 2024年03月29日 16:02/ 0 赞/ 92 阅读

相关 CSS给元素设置ID属性

给元素设置ID属性每一个 HTML 元素都可以具有 id 属性。 id 属性规定 HTML 元素的唯一的 id。 id 属性是唯一的。虽然浏览器不会强制唯一，但

超、凢脫俗/ 2024年03月29日 16:01/ 0 赞/ 72 阅读

相关原生js给元素添加事件

<body> <button id="bb"></button> <div id="a1"></div> </body>

电玩女神/ 2023年05月29日 11:38/ 0 赞/ 7 阅读

相关 vue 中修改contenteditable=“true” 属性， vue中给dom 元素添加 contenteditable属性

找到需要添加或修改的元素的类 <div class="w-e-text"></div> var edit=document.getElementsByCl

Myth丶恋晨/ 2022年12月25日 03:58/ 0 赞/ 273 阅读

相关 Eclipse给Class添加注释模板

设置注释模板的入口以Eclipse为例作介绍 Window->Preference->Java->Code Style->Code Template 然后展开Comm

不念不忘少年蓝@/ 2022年05月29日 23:00/ 0 赞/ 271 阅读

相关 js 给json对象新增属性，再给新添加的属性添加值

json = \{id:'123',name:'张三'\} 添加一个 status 属性: json.newParam ='status';

我会带着你远行/ 2022年04月15日 02:46/ 0 赞/ 494 阅读

相关 JavaScript--动态添加元素

在网页中，使用JavaScript动态创建元素的方式有三种： 1.document.write() 2.Element.innerHTML 3.document.crea

旧城等待，/ 2022年03月28日 04:38/ 0 赞/ 320 阅读

相关 JavaScript给元素添加class属性

注意：element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性

水深无声/ 2022年02月13日 10:57/ 0 赞/ 580 阅读

相关给div添加disabled属性

<div id="CompanyId" name="CompanyId" type="select" ></div> 方法是： $("CompanyId")

拼搏现实的明天。/ 2021年12月13日 01:51/ 0 赞/ 531 阅读