原生js添加class

  1. function hasClass(obj, cls) {
  2. return obj.className.match(new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘));
  3. }
  4. function addClass(obj, cls) {
  5. if (!this.hasClass(obj, cls)) obj.className += " " + cls;
  6. }
  7. function removeClass(obj, cls) {
  8. if (hasClass(obj, cls)) {
  9. var reg = new RegExp(‘(\\s|^)‘ + cls + ‘(\\s|$)‘);
  10. obj.className = obj.className.replace(reg, ‘ ‘);
  11. }
  12. }
  13. function toggleClass(obj,cls){
  14. if(hasClass(obj,cls)){
  15. removeClass(obj, cls);
  16. }else{
  17. addClass(obj, cls);
  18. }
  19. }
  20. function toggleClassTest(){
  21. var obj = document. getElementById(‘test‘);
  22. toggleClass(obj,"testClass");
  23. }

-------------------------------

parent.className = " newDiv";

//改变classname

原生js添加class,布布扣,bubuko.com

时间: 2024-08-02 11:04:05

原生js添加class的相关文章

原生js添加节点的高级简便写法

insertAdjacentHTML()        原生js添加节点element.insertAdjacentHTML(position,text); var obj = document.getElementById("btn1"); obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">"); 原文地址:https://www.cn

原生JS添加节点方法与JQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div

原生JS添加类名 删除类名

为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass")

原生JS 添加或者删除某个class

$S.addHandler($S.getId(fav[i]),'mouseover',function(){                this.className += " "+'S_hover';            });            $S.addHandler($S.getId(fav[i]),'mouseout',function(){                var reg = new RegExp('(\\s|^)'+'S_hover'+'(\\s|

JS添加节点方法与JQuery添加节点方法的比较及总结

原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> <

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来. <!DOCTYPE html> <html lang=&qu

原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料,总结一下. 一.如何用原生js获取class属性 1 <div class = "dom'> 2 </div> 元素JS实现方法: 1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组,用来存放与目标className相同的

原生JS实现分页效果2.0(新增了上一页和下一页,添加当前元素样式)

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m