在 web 開發中,我們經常需要控制網頁中各個元素的樣式。而 CSS 是我們控制樣式的主要方式。但有時候,我們可能需要在一個元素上去掉某條 CSS 樣式屬性。這時候,我們可以通過 JavaScript 的一些函數來實現。
// 取得元素樣式對象 var element = document.getElementById('example'); var style = window.getComputedStyle(element); // 去掉某個 CSS 屬性 style.removeProperty('font-size'); // 添加樣式屬性 style.setProperty('font-weight', 'bold');
以上代碼中,我們首先通過getComputedStyle
方法獲取了一個元素的樣式對象。接著,我們可以使用removeProperty
方法來去掉該對象上的某個屬性(例如,本例中去掉了font-size
屬性)。最后,我們可以使用setProperty
方法來添加樣式屬性(例如,本例中添加了font-weight: bold
屬性)。
我們還可以使用style
屬性來直接獲取或設置某個元素的樣式屬性。例如:
// 獲取元素的樣式 var element = document.getElementById('example'); var fontsize = element.style.fontSize; // 設置元素的樣式 element.style.fontWeight = 'bold';
使用style
屬性直接獲取或設置樣式屬性可以節省時間,但不夠方便。相比之下,使用getComputedStyle
方法獲取樣式對象,或通過樣式對象對元素的樣式進行控制更加方便靈活。