JS:操作样式表 :addClass()和removeClass()

var box = document.getElementById("box");

box.id = "pox";

将id = “box”,改为id = “pox”;

但id = “box”依然存在,这样就不符合W3C标准。不建议使用。

box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类。

如果想有用className避免这种缺陷,可以写成 box.className ="box5 box6 ....",但是这种方法太过麻烦,会造成冗余,因此可以用下面的方法:

js原生的addClass()

首先判断是否有要添加的类名:

  function hasClass(element, cName){
    return !!element.className.match(new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘));
  }

判断后,如果没有则添加

  

  function addClass(element, cName){
    if (!hasClass(element, cName)) {
      return element.className += " " + cName;
    };

  }

addClass(box,"box6");
addClass(box,"box7");

此时的addClass()添加的类并不会覆盖掉原来的类,减少了冗余。

从多个类中删除一个元素,其余类保留:

  

  function removeClass(element,cName){
    if (hasClass(element,cName)) {
      element.className = element.className.replace(new RegExp(‘(\\s|^)‘ + cName + ‘(\\s|$)‘), " ");
    };
  }

  removeClass(box,"box6"); //test,box,box7

时间: 2024-10-10 06:08:00

JS:操作样式表 :addClass()和removeClass()的相关文章

JS:操作样式表1:行内样式

//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.color); // alert(box.style.fontSize);  对复合属性的写法是去掉中间的“—”,并将第二个单词大写. //alert(box.style.float); //float是关键字,因此最好不要这样写 //对float属性ie和非ie有差异: // alert(box.style.cs

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

[荐]使用Js操作注册表

使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问系统文件夹.

DOM操作样式表

1.操作Style样式属性 1.1通过style对象的属性 document.getElementById("bbb").style.backgroundColor="red"; //由style的属性值访问或者获得的是内联样式 1.2通过style对象的方法//由于IE不支持,所以用第一种方法较好 getPropertyValue(propertyName);//用CSS属性中的写法:background-color getPropertyPriority();

原生js获取样式表:currentStyle与defaultView的区别 真实例子

基础概念:currentStyle与defaultView均是用于获取css样式表内样式的js函数 区别在有浏览器的兼容性不同. 下面是测试代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <style type="text/css"> .btn1{ color:red; } <

js实现css、addClass、removeClass和toggleClass

JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值 Javascript中获取样式的值 function css(obj, attr, value) { switch (arguments.length) { case

js操作样式

js同时操作多个Css样式,要用空隔开,不要连在一起,否则容易出错. 错误案例: $('.supplement-list-title.supplement-list-title1').on('click',function(){}) 以上代码点击不起作用. 正确代码: $('.supplement-list-title .supplement-list-title1').on('click',function(){}) 原文地址:https://www.cnblogs.com/wanlibing

20180503 jq学习记录(jquery操作样式表,时间片,jq对象函数间传递)

 jquery 操作dom对象    1.1  动态添加及删除一个dom对象 添加:  var 新对象=document.createElemente("标签""); $(对象预放位置父对象).append(新对象)  //添加完成// 删除: $(新对象).remove()  //删除完成//    1.2  动态操作对象css 设置css: $(对象).css('css属性','样式值') 附加小知识:   1,关于定时器操作  var obj= setInerval(f

JS 操作样式 操作元素

创建 多个div <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1 { width:200px; height:200px; background-color:aqua; } .ddd {widt