計算div的高度

我有一個設定高度的div。計算div的高度

<div class="foo" style="height:100px;">bar</div>

如果我的樣式屬性未明確設置高度，是否可以找到div的高度？

換句話說，我想找到下面的div的高度，而實際上並沒有改變div。

<div class="foo">bar</div>

來源

2015-04-22 Steven Wexler

你使用jQuery？你可以通過jQuery $（'。foo'）獲得元素的高度。outerHeight（）; – jerrylow

不需要jquery。請參閱下面我使用簡單的'clientHeight'屬性的答案。 – boombox

var clone = $('.foo').clone(); 
clone.css('height', 'auto'); 
clone.css('visibility', 'hidden'); 

$('body').append(clone); 

console.log(clone.height());

來源

2015-04-22 18:44:51 AmmarCSE

即將寫出它，最好的辦法，但我認爲高度的默認值是auto; –

@YannChabot，你的權利，更新我的答案。謝謝！ – AmmarCSE

很酷我會試試這個。看起來很棒！ –

-1

如果您正在使用jQuery你可以搶用$高度（」目標類的）。高度（）

來源

2015-04-22 18:44:16

這得到我的div的高度。它沒有得到我的div的高度，style = height：100px被刪除。 –

對不起，它似乎爲我工作。 http://jsbin.com/pikutiqine/1/可能是我缺少的東西 –

你誤解了我的問題。請參閱@ AmmarCSE的答案。 –

使用clientHeight屬性來獲取的內部高度元件。 clientHeight相當於css height屬性。請參見下面的代碼段（第一行展示了使用的clientHeight）：

var height = document.getElementsByClassName('foo')[0].clientHeight; 
 

 
document.getElementById('heightOfFoo').innerHTML = height;

<div class="foo">bar</div> 
 

 
<div id="heightOfFoo"></div>

來源

2015-04-22 18:50:03 boombox

你能解釋一下你的答案如何得到沒有style =「height：100px」的修改div的高度。 –

看看這個：https：//developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight。它是CSS對象模型規範的一部分。 – boombox

我認爲你誤解了我的問題。請參閱@ AmmarCSE的答案。 –

計算div的高度

回答

相關問題