原生js来实现对dom元素class的操作方法

jQuery操作class的方式非常强大

写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

[html] view plaincopy

<style type="text/css">
div.testClass{
background-color:gray;
}
</style>
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj,cls){
if(hasClass(obj,cls)){
removeClass(obj, cls);
}else{
addClass(obj, cls);
}
}
function toggleClassTest(){
var obj = document. getElementById('test');
toggleClass(obj,"testClass");
}
</script>
<body>
<div id = "test" style = "width:250px;height:100px;">
sssssssssssss
</div>
<input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />
</body>

原生js来实现对dom元素class的操作方法相关推荐

js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
原生js中如何添加dom元素
1. appendChild() 概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加. 使用方式:fatherdom.appendChild( insertdom ). 兼容性:所有浏览器都 ...
js添加、删除DOM元素
js添加.删除DOM元素通过demo来熟悉js添加.删除DOM元素,下面是html代码以及在浏览器中的效果: HTML <ul class="list"><li ...
原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
js怎么实现对html代码加密解密,javascript脚本加密解密及HTML转JS
HTML & Javascript 相互转换 < body > HTML & Javascript 输入 & 输出 < br > < script ...

原生js来实现对dom元素class的操作方法

原生js来实现对dom元素class的操作方法相关推荐

最新文章

热门文章