使用Javascript獲取元素的CSS值

Question

我試圖找到一種方法來獲取元素的CSS高度屬性，或者實際上，只是告訴我是否設置了高度屬性。

問題是，當我使用時

$(elem).css('height');

我得到元素的顯示高度，但我試圖看看元素是否具有在類，id或直接在div中設置的高度屬性。

有什么建議么？

Answer 1

你也可以使用身高 。

$(elem).height(); // to get the height.

另見Q / A.

如果你想獲得正確的CSS值，我可以建議不要使用jQuery

如果我們有HTML：

<div id="elem" style="height: auto"></div>

我們可以寫JS：

$('#elem').get(0).style.height    // "auto"

如果我們有HTML：

<div id="elem"></div>

JS：

$('#elem').get(0).style.height    // ""

通用功能：

var height = function(elem){
      return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}

Answer 2

可能不是最好的方法，但我只是看看outerHTML，看看是否設置了高度值。 如果不是那么它就在CSS中（或者沒有設置）。

s = $(elem)[0].outerHTML;
if (s.indexOf("height:") > 0) {
    // inline style
} else {
    // somewhere else
}

Answer 3

    $( "div" ).click(function() {

you can check if height is defined for this div parent element or children using *this* reference. For now i am just fetching the height of the div which has been clicked.
    var height= $( this ).css( "height" );
    //If height is truthy  
    if(height){
    //your code here
    }
    });

希望這能回答您的疑問。 更多細節..

Answer 4

問題是'is set'是什么意思？

在vanilla javascript中你可以這樣做：

element.style.height

如果沒有設置INLINE高度，這將返回一個空字符串。

但是，如果通過樣式表應用了高度，它仍將返回一個空字符串。

問題是，如果你通過jQuery中的.height()或javascript中的window.getComputedStyle(element).height返回計算高度，那么就無法通過應用樣式表來判斷它是否是計算出來的（你會想到什么）調用'具有高度屬性集'），或者通過擴展元素的高度以適合其內容（您稱之為'沒有高度屬性集'）生成。

---------------------更新----------------------

為了使它更清楚，我試圖看看div的高度是否是計算高度，或者它是否是在css中定義的高度。

div可以包含它的子節點的高度，或者它可以具有專門設置在div上的高度。 可以在CSS文件，頁面上的樣式標記或div本身上設置所討論的子項或div的高度。

我試圖看看div是否有css set height屬性。

• 通過pedalpete

---------------------更新----------------------

我理解你的問題，但也許我的答案有點不透明。

如果某個元素的樣式表應用了樣式屬性，則無法調用任何內容。 換句話說，你不能做你想做的事。

您可以找到的唯一一件事（通過element.style ）是否有聲明的內聯樣式。

getComputedStyle將告訴你當前元素有多高，但它不會告訴你它是如何得到的那樣。

• 格雷厄姆尼科爾

Answer 5

看起來沒有一種簡單的方法可以做到這一點，我解決這個問題的方法是隱藏div的子節點，並檢查div的高度是否已經改變。 如果有，則未設置高度，如果沒有設置高度。

當div只有文本時，這會失敗，但由於這是一個布局標記，它可能總是有子標記。

var elHeight = $(elem).height();
$(elem).children().hide();
var checkHeight = elHeight===$(elem).height();
$(elem).children().show();
console.log(checkHeight);
if(checkHeight===false) return setSize($(elem).parent().height()/2);