原生js给div添加类

一写个函数然后传入对象元素跟样式名字，判定是否为空，如果不为空就赋值样式名字；

function addclass(elm,newclass){var c = elm.className;if(c!="")elm.className=newclass;
}

二写个函数然后传入对象元素跟需要添加到样式名字，判定是否为空，如果为空就赋值，否则就加个空格再赋值；

function addclass(elm,newclass){var c = elm.className;elm.className = (c =="") ? newclass : c+' '+newclass;
}

三传入对象元素跟样式名字，然后把elm.className看成用“ ”（空格）分割的字符串，用split去除空格变成数组，然后用push方法添加样式到数组中，用join添加空格变成字符串再赋值给元素的class，很独特很棒的方法。

function addclass(elm,newclass){ var classes = elm.className.split(' '); classes.push(newclass); elm.className = classes.join(' ');
}

然而，我觉得有点不足，假如元素本来就有newclass这类名，那怎么办？就像这样:
<div class="div1 div2">
然后我想添加个div2类给这个div,如果用第三种方法，虽然不会出错，但页面显示会变成这样<div class="div1 div2 div2">，于是我用第四种方法：

四继承第三种方法的优势，在其基础上做了个循环判定，保证没有重复的名字存在。

function zhen(obj,claName){var cla=obj.className.split(" ");for(var i=0;i<cla.length;i++){if(cla[i]==claName)return;}cla.push(claName);obj.className=cla.join(" ");
}

jquery添加类极易，一般工作用jquery添加，在此不赘述。

转载于:https://www.cnblogs.com/wu-hou/p/6375431.html

原生js给div添加类相关推荐

原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
原生js实现购物车添加删除商品、计算价格功能
购物车功能需求: 根据数据创建购物车内容: 实现购物车添加商品功能: 实现购物车商品数量的增加.减少: 实现购物车商品的删除功能: 购物车的全选功能: 无货商品不可修改数量.不计入总价: 底部计算总 ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...
html 鼠标放在div悬停事件,用js给div添加鼠标悬停事件
新任务:给表格上的某列添加鼠标悬浮事件但是表格是由omGrid生成的,无法修改所以只能先获取,再添加事件先用firebug看清表格结构:\ 是div class="innerCo1 & ...
原生js删除html,原生js操作dom添加删除替换class
1.比较传统的方法 var classVal = document.getElementById("id").getAttribute("class"); // ...
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...
【原生js】动态添加class
1.添加类名: document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名: document.getEle ...
原生js中如何添加dom元素
1. appendChild() 概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加. 使用方式:fatherdom.appendChild( insertdom ). 兼容性:所有浏览器都 ...

原生js给div添加类

原生js给div添加类相关推荐

最新文章

热门文章