問題

如何使用JavaScript更改HTML元素類以響應onclick事件?

  最佳答案

改變類的現代HTML5技術

現代瀏覽器添加了 classList ,它提供了方法,以便在不需要庫的情況下更容易操作類:

 document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');
 

不幸的是,這些在v10之前在Internet Explorer中不起作用,儘管有一個 shim 向IE8和IE9新增支援,可以從這個頁面.但是,越來越多的支援.

簡單的交叉瀏覽器解決方案

選擇元素的標準JavaScript方法是使用 document.getElementById("Id") ,這是以下示例使用的 – 當然可以以其他方式獲取元素,在正確的情況下可以簡單地使用this – 但是,詳細討論這超出了答案的範圍.

要更改元素的所有類:

為了用一個或多個新類替換所有現有類,設定類Name屬性:

 document.getElementById("MyElement").className = "MyClass";
 

(您可以使用一個分隔空間的列表來應用多個類。)

將額外的類新增到元素中:

要將類新增到元素中,而不刪除/影響現有值,請附加空格和新類名,如下所示:

 document.getElementById("MyElement").className += " MyClass";
 

從元素中刪除類:

為了將單個類刪除到元素,在不影響其他潛在類的情況下,需要一個簡單的正則表示式替換:

 document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
 

對此正則表示式的解釋如下:

 (?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)
 

g標誌告訴替換按需重複,以防類名被多次新增。

檢查一個類是否已經應用於元素:

上面用於刪除類的相同正則表示式也可用於檢查特定類是否存在:

 if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
 


將這些操作分配給onclick事件:

雖然可以直接在HTML事件屬性(例如onclick="this.className+=' MyClass'")中編寫JavaScript,但這不是推薦的行為.特別是在較大的應用程式中,透過將HTML標記與JavaScript互動邏輯分離來實現更可維護的程式碼.

實現這一目標的第一步是建立一個函式,並在onclick屬性中呼叫函式,例如:

 <script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>
 

(不需要在指令碼標籤中使用此程式碼,這只是為了簡潔起見,將JavaScript包含在不同的檔案中可能更為合適.)

第二步是將onclick事件從HTML移動到JavaScript,例如使用 addEventListener

 <script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>
 

(請注意,需要window.onload部分,以便在HTML完成載入後執行該函式的內容 – 沒有這個,當呼叫JavaScript程式碼時,MyElement可能不存在,因此該行將失敗.)


JavaScript框架和庫

上面的程式碼都在標準的JavaScript中,但是常見的做法是使用框架或庫來簡化共同任務,以及從您在編寫程式碼時可能不會想到的固定錯誤和邊緣情況中獲益。

雖然有些人認為新增~50 KB框架可以簡單地更改類,但是如果您正在做大量的JavaScript工作,或者任何可能有異常的跨瀏覽器行為的東西,那麼很值得考慮。

(很大程度上,庫是為特定任務設計的一組工具,而框架通常包含多個庫並執行完整的一組任務)

上面的例子已經在下面使用 jQuery 複製,可能是最常用的JavaScript庫(雖然還有其他值得調查).

(請注意,這裡的$是jQuery物件.)

使用jQuery更改類:

 $('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )
 

此外,jQuery提供了一個快捷方式,用於在不適用的情況下新增類,或刪除執行以下操作的類:

 $('#MyElement').toggleClass('MyClass');
 


使用jQuery將函式分配給單擊事件:

 $('#MyElement').click(changeClass);
 

或者,在不需要id的情況下:

 $(':button:contains(My Button)').click(changeClass);
 


  相同標籤的其他問題

javascripthtmldom