在javascript中动态添加/删除样式

在任何浏览器中是否有添加/删除类名的方法？例如，如果我有一个类名的div，我只想删除/添加'name2'有没有办法做到这一点？在javascript中动态添加/删除样式

感谢， rodchar

来源

2010-04-05 Rod

如果你可以使用jQuery：

删除：

$('#div1').removeClass('name2')

补充：

$('#div1').addClass('name2')

如果您不能使用jQuery，我发现这个网址

http://snipplr.com/view/3561/addclass-removeclass-hasclass/

function hasClass(ele,cls) { 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 

function addClass(ele,cls) { 
    if (!this.hasClass(ele,cls)) ele.className += " "+cls; 
} 

function removeClass(ele,cls) { 
    if (hasClass(ele,cls)) { 
     var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
     ele.className=ele.className.replace(reg,' '); 
    } 
}

老实说，我没有使用非jQuery的方法，但似乎不够

来源

2010-04-05 13:31:01

+1对于非jQuery的解决方案 – 2010-04-05 14:26:35

有将是一种标准的方法去做这个。 HTML5引入了classList属性，它的工作原理是这样的：

element.classList.add('foo'); 
element.classList.remove('bar'); 
if (element.classList.contains('bof')) 
    element.classList.toggle('zot');

火狐3.6已经有这个功能，它的WebKit中正在处理。

这里是一个纯JS实现：

// HTML5 classList-style methods 
// 
function Element_classList(element) { 
    if ('classList' in element) 
     return element.classList; 

    return { 
     item: function(ix) { 
      return element.className.trim().split(/\s+/)[ix]; 
     }, 
     contains: function(name) { 
      var classes= element.className.trim().split(/\s+/); 
      return classes.indexOf(name)!==-1; 
     }, 
     add: function(name) { 
      var classes= element.className.trim().split(/\s+/); 
      if (classes.indexOf(name)===-1) { 
       classes.push(name); 
       element.className= classes.join(' '); 
      } 
     }, 
     remove: function(name) { 
      var classes= element.className.trim().split(/\s+/); 
      var ix= classes.indexOf(name); 
      if (ix!==-1) { 
       classes.splice(ix, 1); 
       element.className= classes.join(' '); 
      } 
     }, 
     toggle: function(name) { 
      var classes= element.className.trim().split(/\s+/); 
      var ix= classes.indexOf(name); 
      if (ix!==-1) 
       classes.splice(ix, 1); 
      else 
       classes.push(name); 
      element.className= classes.join(' '); 
     } 
    }; 
} 

// Add ECMA262-5 string trim if not supported natively 
// 
if (!('trim' in String.prototype)) { 
    String.prototype.trim= function() { 
     return this.replace(/^\s+/, '').replace(/\s+$/, ''); 
    }; 
} 

// Add ECMA262-5 Array indexOf if not supported natively 
// 
if (!('indexOf' in Array.prototype)) { 
    Array.prototype.indexOf= function(find, from /*opt*/) { 
     for (var i= from || 0, n= this.length; i<n; i++) 
      if (i in this && this[i]===find) 
       return i; 
     return -1; 
    }; 
}

这并不意味着你必须写：

Element_classList(element).add('foo');

其略少不错的，但你会得到快速的优势本地实现在哪里可用。

来源

2010-04-05 15:06:26 bobince

你可能只是做element.classList.add（“富”），卸下摆臂（“富”），以及切换（“富”）直接在班级列表目的。 https://developer.mozilla.org/en/DOM/element.classList – Clement 2012-07-10 18:48:17

Errrm ...是的，这是我链接的W3文档指定的完全相同的对象。 :-)问题是支持传统的浏览器，因此上面的polyfill代码。 – bobince 2012-07-11 14:48:11

它很容易与JavaScript来改变任何事件的类名例如。

<script> 
function changeClas() 
{ 
    document.getElementById('myDiv').className='myNewClass'; 
}  
</script> 

<div id="myDiv" onmouseover='changeClas()' class='myOldClass'> Hi There</div>

来源

2010-04-05 15:21:23 nik

在javascript中动态添加/删除样式

回答

相关问题