如何從JavaScript讀取CSS值？

Question

我想知道如何讀取和保存一個HTML元素的CSS值的變量。例如說，你有這樣的：

<tr id="presentationProperty" style="display: none;"> 

我希望能夠讀取顯示：無屬性，並將其保存到內部的JavaScript變量。這是可能的，如果是這樣，如何？

Answer 1

簡單：

var display = document.getElementById('presentationProperty').style.display; 

在全球範圍內，你可以訪問到這樣一個元素的樣式屬性：

var getStyle = function(elementID, prop) { 
    return document.getElementById(''+elementID+'').style[prop]; 
}; 

alert (getStyle('presentationProperty', 'display')); // block 
alert (getStyle('presentationProperty', 'position')); 
alert (getStyle('presentationProperty', 'backgroundColor')); 
// ... 

Answer 2

首先，您需要獲得元素，然後你可以使用style property：

var element = document.getElementById("presentationProperty"); 
var display = element.style.display; 

See here for a full list可用樣式屬性

Answer 3

如果要讀取應用於元素的最終樣式，請使用getComputedStyle()。這包括應用於元素的任何樣式，無論是外部樣式表，在同一文檔中定義的樣式，由JavaScript應用的元素樣式或樣式。

var elem = document.getElementById("presentationProperty"); 
var theCSSprop = window.getComputedStyle(elem).getPropertyValue("display"); 

Answer 4

嘗試一下本作獲得所有屬性：

var css = document.getElementById('presentationProperty').style.cssText; 
alert(css); 

Answer 5

試試這個：

var x = document.getElementById('presentationProperty').style.display; 

Answer 6

您可以簡單地這樣做：

var el = document.getElementById('presentationProperty'); 
console.log(el.style.display); 

但是，由於它會返回空字符串如果元素沒有顯示屬性在CSS內定義（即它正在繼承默認的顯示屬性）。

Answer 7

您可以使用getComputedStyle()在特定元素上應用css值，如下所示。

HTML

<tr id="presentationProperty" style="display: none;"> 

的javaScript

var tr= document.getElementById('presentationProperty'); 
var computedStyle = document.defaultView.getComputedStyle(tr); 
var dispVal = computedStyle['display'] 

這時候你appied的CSS（display）作爲外部或內部的CSS更多usefule。