用於類別操作的現代 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');
跨瀏覽器解決方案
要將所有現有類別替換為新類,請使用className:
document.getElementById("MyElement").className = "MyClass";
附加空格和新類別名稱:
document.getElementById("MyElement").className += " MyClass";
使用正規表示式替換:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g , '');
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
事件處理
您可以透過以下方式將這些操作分配給onclick 或其他事件:
<button onClick="changeClass()"></button>
document.getElementById("MyElement").addEventListener('click', changeClass);
框架和函式庫簡化了這些任務,例如 jQuery:
以上是如何在 JavaScript 中動態管理元素類別?的詳細內容。更多資訊請關注PHP中文網其他相關文章!