如何用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>