在前端開發中,經常需要使用 JavaScript 來操作 HTML 元素的樣式。CSS 屬性是 HTML 元素的可視特征之一,因此訪問 CSS 屬性是非常重要的。
下面是幾種常見的訪問 CSS 屬性的方式:
// 1. 使用 style 屬性 var element = document.getElementById("my-element"); element.style.color = "red"; element.style.fontSize = "18px"; // 2. 使用 getComputedStyle 方法(推薦) var element = document.getElementById("my-element"); var computedStyle = window.getComputedStyle(element); console.log(computedStyle.color); console.log(computedStyle.fontSize); // 3. 使用 currentStyle 屬性(僅 IE 瀏覽器支持) var element = document.getElementById("my-element"); console.log(element.currentStyle.color); console.log(element.currentStyle.fontSize);
第一種方式是最簡單和最直接的方法,但是有一些局限性。首先,它只能讀寫內聯樣式,即通過 HTML 標簽中的 style 屬性來定義的樣式。如果樣式定義在外部的樣式表中,那么這種方式就不可用了。其次,一定要注意屬性名的書寫,要以駝峰式命名,如 fontSize 而不是 font-size。
第二種方式使用了getComputedStyle
方法,可以獲取元素計算后的樣式,即包括內聯樣式和外部樣式表中的樣式。它返回的結果是一個CSSStyleDeclaration
對象,可以通過該對象的屬性名來獲取對應的樣式值。這種方式是目前最常用的訪問 CSS 屬性的方法。
第三種方式是 IE 瀏覽器獨有的,由于 IE 瀏覽器采用了不同的樣式計算方式,所以不能用getComputedStyle
方法來訪問樣式。在 IE 瀏覽器中,可以使用currentStyle
屬性來獲取元素計算后的樣式。