脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → 原生js对dom元素class的操作

原生JavaScript来实现对dom元素class的操作方法(推荐)

 更新时间：2017年08月16日 16:51:07   作者：yusirxiaer  
这篇文章主要介绍了原生JavaScript来实现对dom元素class的操作方法,提供了代码toggleClass的测试例子，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

jQuery操作class的方式非常强大

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

1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在)，就删除(添加)一个样式
4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

[html] view plain copy
<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动态获取浏览器或页面等容器的宽高

    详解js动态获取浏览器或页面等容器的宽高

    这篇文章主要介绍了js动态获取浏览器或页面等容器的宽高，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript之引用类型介绍

    JavaScript之引用类型介绍

    引用类型通常叫作类（class），也就是说，遇到引用值时，所处理的就是对象。
    2012-08-08
  • JavaScript中将数组进行合并的基本方法讲解

    JavaScript中将数组进行合并的基本方法讲解

    这篇文章主要介绍了JavaScript中将数组进行合并的基本方法讲解,包括快速合并多个数组的方法,需要的朋友可以参考下
    2016-03-03
  • 深入理解JavaScript中的箭头函数

    深入理解JavaScript中的箭头函数

    这篇文章主要介绍了深入理解JavaScript中的箭头函数,文中主要针对ES6版本的JS进行相关的讲解,需要的朋友可以参考下
    2015-07-07
  • javascript的防抖和节流你了解吗

    javascript的防抖和节流你了解吗

    这篇文章主要为大家介绍了javascript的防抖和节流，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • 自动化测试读写64位操作系统的注册表

    自动化测试读写64位操作系统的注册表

    本文主要介绍自动化测试读写64位操作系统的注册表,这里提供详细的教程来实现自动化读写64位操作系统的注册表,希望能帮助测试软件的朋友,有兴趣的小伙伴可以参考下
    2016-08-08
  • ES6变量赋值和基本数据类型详解

    ES6变量赋值和基本数据类型详解

    本文详细讲解了ES6变量赋值和基本数据类型，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • a标签的href与onclick事件的区别详解

    a标签的href与onclick事件的区别详解

    对于a标签的href与onclick事件,大家都经常见到，也经常使用,可它们有什么区别呢?下面就让小编来给大家详细介绍下,感兴趣的朋友可以学习下，不用谢了，哈哈
    2014-11-11
  • Array.slice()与Array.splice()的返回值类型

    Array.slice()与Array.splice()的返回值类型

    Array.slice()与Array.splice()的返回值类型...
    2006-10-10
  • JavaScript代码优雅，简洁的编写技巧总结

    JavaScript代码优雅，简洁的编写技巧总结

    专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写当前能工作就行的代码。在此基础上，简洁代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。以下列表一些好编写方式，仅供参考
    2022-10-10

最新评论