使用JavaScript更改元素的類


14 Answers

你也可以做:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

並切換一個類(刪除如果存在,否則添加它):

document.getElementById('id').classList.toggle('class');
Question

如何使用JavaScript更改一個HTML元素的類以響應onClick事件?




hereherehere

點擊操作時,您可以嘗試使用:

替換(oldClass,newClass)
用新班級替換現有班級。

例如:

var myDiv = document.getElementById('myElement'); 
myDiv.classList.contains('myCssClass');
myDiv.classList.replace("myCssClass", "myCssClass_new");



在前面的正則表達式中有一些小調和調整:

如果班級名單不止一次地擁有班級名稱,您將需要在全球範圍內執行此操作。 而且,您可能需要從班級列表的末尾去掉空格,並將多個空格轉換為一個空格,以避免出現空格。 如果使用類名稱的唯一代碼使用下面的正則表達式並在添加名稱之前刪除名稱,則這些事情都不應該成為問題。 但。 那麼,誰知道誰可能會與班級名單一起貶低。

這個正則表達式不區分大小寫,這樣在類名稱中不用考慮大小寫的瀏覽器上使用代碼之前,類名稱中的錯誤可能會顯示出來。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");



好吧,我認為在這種情況下,您應該使用jQuery或在純JavaScript中編寫您自己的方法,如果我不需要其他原因,我的首選是添加自己的方法,而不是將所有jQuery注入到我的應用程序中。

我想做一些像下面這樣的方法,以我的JavaScript框架來添加幾個功能,處理添加類,刪除類,類似於jQuery,這是完全支持在IE9 +中,我的代碼也寫在ES6中,所以你需要以確保您的瀏覽器支持它或使用類似babel的東西,否則需要在您的代碼中使用ES5語法,同樣這樣,我們通過ID找到元素,這意味著元素需要選擇一個ID:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

你可以簡單地使用它們,如下所示,想像你的元素有'id'和'class'類,請確保你將它們作為字符串傳遞,你可以使用如下的util:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');



可以辦到。

HTML:

<div class="red" id="text">
<a href="#" onclick="changeClass();">Fahad</a>
</div>

CSS:

.red a{
  color:red;
}
.black a{
  color:black;
}

JavaScript的:

function changeClass(){
document.getElementById("text").className = "black";
}

Fiddle




這很好,我覺得很有幫助。

function classChangeFn() {
        document.getElementById("MyElement").className = "";
    }

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }



使用純JavaScript代碼:

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, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}



你也可以擴展HTMLElement對象,以添加方法來添加,刪除,切換和檢查類( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

然後就像這樣使用(點擊將添加或刪除類):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

這裡是demo




工作JavaScript代碼:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

您可以從此鏈接下載工作代碼。




這裡有一個toggleClass來切換/添加/刪除元素上的類:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

jsfiddle

也可以here看到我的答案動態創建一個新類




這是我的版本,完全工作:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

用法:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >



沒有冒犯性,但由於它迫使CSS解釋器重新計算整個網頁的視覺表現,因此更改班級並不是件容易的事。

原因是CSS解釋器幾乎不可能知道是否可以改變繼承或級聯,所以簡短的答案是:

永遠不要改變className! - )

但通常你只需要改變一個或兩個屬性,這很容易實現:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}



你可以像這樣使用node.className

document.getElementById('foo').className = 'bar';

根據PPK這應該在IE5.5以上。




這是簡單的jQuery代碼來做到這一點。

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

這裡,

  • Class1是一個事件的偵聽器。
  • 父類是承載您要更改的類的類
  • Classtoremove是你有的老班。
  • 要添加的類是要添加的新類。
  • 100是類更改的超時延遲。

祝你好運。




我會使用jQuery並寫下如下內容:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

這段代碼添加了一個函數,當id some元素的一個元素被點擊時被調用。 如果函數不是它的一部分,則該函數會附加到元素的類屬性中,如果它存在,則會將其刪除。

是的,您需要在頁面中添加對jQuery庫的引用來使用此代碼,但至少您可以確信,庫中的大多數功能都可以在幾乎所有現代瀏覽器上運行,並且可以節省您的時間你自己的代碼也是這樣做的。

謝謝




Related