在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中動態添加/刪除樣式

回答

相關問題