如何用js獲得內聯元素高度，如跨度元素？

Question

var mySpan=document.getElementById("mySpan"); 
 
alert(mySpan.height);

<span id="mySpan" style="line-height:200px;">hello world</span>

，但我得到undefined。 Javascript只能獲得塊或內嵌塊元素的高度。

Answer 1

對於內聯元素（和塊以及），可以使用的offsetHeight。這將包括垂直填充和邊框以及：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 2

使用window.getComputedStyle(mySpan).lineHeight可以獲取元素行高的值，而不管樣式是內聯還是外部CSS文件。

var mySpan=document.getElementById("mySpan"); 
 
console.log(window.getComputedStyle(mySpan).lineHeight);

<span id="mySpan" style="line-height:200px;">hello world</span>

Answer 3

帶有-的CSS屬性在Javascript對象的camelCase中表示。例如 - mySpan.style.lineHeight。

您還可以使用括號表示法來訪問屬性。防爆 - mySpan.style['line-height']

var mySpan=document.getElementById("mySpan"); 
 
console.log(mySpan.style.lineHeight); 
 
console.log(mySpan.style['line-height']);

<span id="mySpan" style="line-height:200px;">hello world</span>