如何使用js获取内联元素高度，例如span元素？

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文件定义。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

具有-的CSS属性在Javascript对象的camelCase中表示。前 - mySpan.style.lineHeight。

您还可以使用括号表示法来访问属性。前 - mySpan.style['line-height']

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;