JavaScript中的getstyle方法是用來獲取指定元素的CSS屬性值的。getstyle方法常常應用于動態網頁開發中,利用他可以改變元素的樣式以達到動態效果。
舉例說明,在下面的HTML代碼中,我們有一個div元素,CSS屬性設置了背景顏色為紅色且字體大小為20px:
這是一個div元素
要獲取這個元素的背景顏色,我們使用下面這行代碼:
var bgColor = document.getElementById("mydiv").style.backgroundColor;
這行代碼會返回字符串“red”,這是因為我們在CSS屬性中設置了背景顏色為紅色。同樣的,我們也可以獲取元素的字體大小:
var fontSize = document.getElementById("mydiv").style.fontSize;
這行代碼會返回字符串“20px”,表示該元素的字體大小為20像素。
然而,在某些情況下,我們需要獲取元素的計算樣式(computed style),而不只是它的內聯樣式(inline style)。計算樣式是指元素在應用了所有CSS規則之后的樣式,包括內聯樣式和外部樣式表中的規則。
要獲取元素的計算樣式,我們可以使用window.getComputedStyle方法。例如,在下面的代碼中,我們使用window.getComputedStyle獲取了id為“mydiv”的div元素的背景顏色和字體大小:
// 獲取背景顏色 var style = window.getComputedStyle(document.getElementById("mydiv")); var bgColor = style.backgroundColor; // 獲取字體大小 var fontSize = style.fontSize;
無論是通過元素的style屬性獲取內聯樣式還是通過window.getComputedStyle獲取計算樣式,我們都可以使用JavaScript的getstyle方法來獲取元素的CSS屬性值。