《JavaScript DOM编程艺术》给元素追加一个新的class类

最新推荐文章于 2022-02-25 16:10:52 发布
原创 最新推荐文章于 2022-02-25 16:10:52 发布 · 284 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了一种在网页元素中添加Class的方法。首先检查元素的className属性是否为空，如果为空，则直接将新Class名赋值给该属性；如果不为空，则在现有Class名后追加一个空格和新Class名。此方法适用于需要动态修改元素样式的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

function addClass(elment,value){
 	if (!elment.className) {
 		elment.className = value;
 	}else{
 		newClassName = elment.className;
 		newClassName +=" ";
 		newClassName += value;
 		elment.className = newClassName;
 	}
 }

1、检查className属性的值是否为null；
2、如果是，把新的class设置值直接赋值给className属性；
3、如果不是，把一个空格和新的class设置值追加到className属性上。

JavaScriptDOM 编程艺术（第二版）
weixin_42957650的博客
01-28 887
基础知识部分：   获取元素： DOM 提供的方法getElementById()  返回一个与那个有着给定id属性值的元素结点对应的对象。JavaScript区分大小写 document.getElementById()   getElementsByTagName(Tag)方法返回一个对象数组 ，每个对象分别对应着文档里有着给定标签的一个元素 getElementsByTagNa...
JavaScript DOM编程艺术(第二版)综合示例global.js源码
请叫我AXin
10-18 4181
下面是完整的global.js源码，部分程序稍作了一些修改(不需要修改其他源文件)，并且注明了在使用THML5的时候哪些函数可以不需要。function addLoadEvent(func) { // 为load事件添加响应函数 var curonload = window.onload; // 保存当前的load事件响应函数 if(typeof curonload != 'func
JAvascript Dom编程艺术 图片库
02-28
JavscriptDom编程艺术 这本书是一本很基础的书，但对于刚入前端不久的我来说是一本不错的书，收获还是很大的，对一些基础的东西理解得更加透彻了。
dom给元素添加多个clasname,dom获取属性名的值
gdutRex的博客
10-17 695
问题一：我们后期如果需要给一个节点新增加一个calssname，如何进行操作呢？ var dom = document.getElementById("dom") dom.className = 'classname1 classname2' 在类名之间加个空格即可。 如果类名需要动态添加如何修改？ 只需要使用新语法``即可 var clasname = 'classname3' var dom...
通过className属性给一个元素追加新class（addClass函数）
Hyin的博客
01-22 2541
这个函数有两个参数：第一个是需要添加新class的元素（element），第二个是新的class设置值（value） 1、检查className属性值是否为null 2、如果是，把新的class设置值直接赋值给className 3、如果不是，把一个空格和新的class设置值追加到className属性上去 function addClass(element,value) {
【DOM编程艺术】addClass(element,value)
weixin_33877885的博客
06-24 346
function addClass(element,value){ if(!element.className){ element.className = value; }else{ element.className += ' '+ value; //必须加一个空格 } } 调用addClass(elem,'intr...
读JavaScript DOM编程艺术笔记
10-28
JavaScript DOM编程艺术笔记的知识点涵盖了在网页开发中，如何通过JavaScript操作文档对象模型（DOM）来实现各种动态网页效果。以下是根据提供的内容总结的知识点： 1. 获取DOM元素的下一个兄弟节点 在DOM操作中，...
JavaScript DOM编程艺术 附录.pdf
07-30
### JavaScript DOM编程艺术：核心DOM方法与属性详解 在深入探讨《JavaScript DOM编程艺术》一书的精华内容之前，我们首先要理解DOM（Document Object Model，文档对象模型）的基础概念。DOM是一种标准，用于表示和...
JavaScript DOM编程艺术 附录
08-03
### JavaScript DOM编程艺术知识点概述 #### 一、DOM方法和属性简介 《JavaScript DOM编程艺术》这本书对于初学者来说非常友好，它不仅介绍了DOM的基本概念，还深入讲解了DOM的操作方法，包括创建、复制、插入、...
JavaScript--DOM--共享onload 事件
norang的博客
06-06 451
6.3.2 共享onload 事件 我必须执行prepareGallery 函数才能对onclick 事件进行绑定。 如果马上执行这个函数，它将无法完成其工作。如果在HTML文档完成加载之前执行脚本，此时DOM是不完整的。具体到prepareGallery 函数，它的第3行代码将测试"imagegallery" 元素是否存在，如果 DOM不完整，这项测试的准确性就无从谈起，事态的发展就会偏离我 的计划。 应该让这个函数在网页加载完毕之后立刻执行。网页加载完毕时会触发 一个onload 事件，这个事件与win
dom编程艺术源码(带素材)
03-20
这是dom编程艺术第二版的素材和源码,学习JavaScript中dom的经典书籍,欢迎参考我之前发的js圣经书籍,即和/
原生js给DOM元素添加一个或者多个类的方法总结
涂涂
12-28 4万+
先看两个例子： html: 啦啦啦 css： .test{ width: 100px; height: 100px; background: #B6BAC4; } .test1{ border: 1px solid; width: 200px; border-radius: 4px; } .test2{ margin: 0 auto; } .test3{
原生js给DOM元素添加、删除类名
我的博客
02-25 1万+
方法一： DOM.className = '类名'; 说明：一次只能设置一个类值，如果当前属性本身存在类值，会被替换。 方法二： DOM.setAttribute("class", "类名") DOM.removeAttribute("class", "类名") 说明：setAttribute用于创建或改变某个新属性，如果指定属性已经存在，则只设置该值并且会替换原来的值。 方法二： DOM.classList.add('类名一', '类名二', '类名三); // 添加一个或多个类名
js为dom元素添加class名
mm_hello11的博客
03-27 6966
代码如下： <div class="aa bb cc" id='name'></div> <script type="text/javascript"> function addClass(el, className){ if(hasClass(el, className)){ return } var newClass = el...
js-DOM给class追加一个新的元素
sina_panda
03-12 7569
在需要给一个元素追加新的class时，你可以按照以下步骤： 检查className属性的值是否为空； 如果是，把新的class设置值直接赋予给classNameN； 如果不是，把一个新的class设置的值直接赋予个className属性上去 我们把上面的步骤封装成一个函数，addClass。这个函数带有两个参数：第一个是添加新的class的元素（element），第二个是新的class设置值（val
整理总结：JS DOM中对className的选择，添加和删除
Dorui的博客
10-22 7909
对相同className的元素的选择 /*方法*/ function getByClass(oParent, sClassName) { var aEls = oParent.getElementsByTagName("*"); //选择确定父元素内所有元素 var arr = []; for (var i = 0; i < aEls.length; i++) {
为DOM元素动态添加class，解决addclass()的覆盖问题
StarFishing
12-18 3万+
当我们需要对dom元素动态添加一个新的样式时，通常会使用jquery的addclass()来完成 $('div').addClass('color') 但是这个方法有一个很大的弊端，他会覆盖原来的class，所以使用addclass()只能保证新的样式加上去，原来得就没有了; 其次也可以用原生的js来添加，类似这样： document.getElementsByTagName('body')[0...
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 =...
javascriptDOM实现给某个元素追加class
朝闻道,夕死可矣!
04-24 1848
function addClass(element,value) {     if (!element.className) {         element.className = value;     } else {         newClassName = element.className;         newClassName += "";         new
精通JavaScript DOM编程艺术与Web标准布局设计
- **《JavaScript DOM编程艺术 第2版》(Jeremy Keith等).[PDF].pdf**：这表明有一个电子书版本的《JavaScript DOM编程艺术 第2版》书籍内容，用户可以直接在电子阅读器或电脑上阅读。 - **使用说明.txt**：很可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值