在前端開發中,我們經常需要使用JS來改變HTML標簽的CSS樣式。通常的做法是使用document.getElementById()
等方法獲取特定的標簽,進而通過設置其樣式的屬性值來改變CSS樣式。但是,有時候我們遇到一些特殊的情況,比如不能獲取特定的標簽,或者需要避免硬編碼,這時候就需要考慮其他的解決方案。
// 正常的做法,獲取標簽并改變樣式 var ele = document.getElementById('myElement'); ele.style.color = 'red';
那么,有沒有不獲取HTML標簽就能改變其CSS樣式的方法呢?答案是有的。我們可以使用classList
來操作HTML標簽的類名,進而達到改變CSS樣式的目的。
// 不獲取標簽,改變樣式 var eleClass = document.querySelector('.myClass'); eleClass.classList.add('red-text');
上述代碼中,我們使用querySelector()
方法根據CSS選擇器獲取HTML標簽所在的節點,然后使用classList.add()
方法添加一個類名red-text
,該類名定義了相應的CSS樣式。這樣就可以達到不獲取標簽就能改變其CSS樣式的目的了。
需要注意的是,使用classList
需要先定義好相應的類名,且該類名必須在CSS文件中定義,否則無法達到改變CSS樣式的目的。
以上就是不獲取HTML標簽就能改變其CSS樣式的方法,適用于某些特殊場景。