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

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>

以上就是小编为大家整理的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家继续支持我们~~

赞 (0)

相关推荐

  • 如何用js判断dom是否有存在某class的值

    例如: <html class="no-js"> <head> </head> <body> </body> </html> 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var rclass = /[\t\r\n\f]/g; jQuery.fn.extend({ hasClas

  • 纯JS实现根据CSS的class选择DOM

    // 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 复制代码 代码如下: <script type="text/javascript"> function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getEle

  • JavaScript实现获取dom中class的方法

    本文实例讲述了JavaScript实现获取dom中class的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getClass(node,classname) { if(node.getEle

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

    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.testClas

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JavaScript监听一个DOM元素大小变化

    1.需求场景 开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化. 比如我用canvas绘制了一个chart,当canvas的size发生变化的时候,需要重新绘制里面的内容,这个时候就需要监听resize事件做处理.window上虽然有resize事件监听,但这并不能满足我们的需求,因为很多时候,div的size发生了变化,实际 window.resize 事件并未触发. 对于div的resize事件的监听,实现方式有很多,比如定时器检查,通过scroll事件等等,本文主要介绍

  • JavaScript DOM元素常见操作详解【添加、删除、修改等】

    本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看 通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点 整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI

  • 原生js仿jquery实现对Ajax的封装

    前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

  • jQuery与原生JavaScript选择HTML元素集合用法对比分析

    本文实例讲述了jQuery与原生JavaScript选择HTML元素集合用法.分享给大家供大家参考,具体如下: 通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName(部分浏览器不支持),可以返回HTMLCollection对象.表面上,它们与数组很类似,因为它们都包含length属性并且元素都可以通过[index]方式访问.然而,实际上它们并不是数组:诸如pus

  • javascript实现dom元素可拖动

    摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(

  • JavaScript操作DOM元素的childNodes和children区别

    对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

  • 用JavaScript获取DOM元素位置和尺寸大小的方法

    用JavaScript获取DOM元素位置和尺寸大小的方法

    在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL

  • Javascript处理DOM元素事件实现代码

    DOM元素都有一些标准事件,一般使用时只要使用onclick=function的方式就可以了,但是当需要为DOM元素添加多个事件,删除事件,或在用Javascript封装控件的时候,为封装的控件添加自定义事件的时候,onclick=function的方式就不够用了,但是浏览器有addEventListener和attachEvent方法可供调用,从而模拟出类似于C#中的事件委托的事件触发机制! 复制代码 代码如下: /* * 功能:事件处理 * Author:LQB * 时间:2009-1-4

随机推荐