"Is there a way to determine the height of an inline element, such as a span element,

Question

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

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

However, the result I receive is undefined. This is because Javascript can only retrieve the height of block or inline-block elements.

Answer 1

Answer №1

To obtain the height of both inline and block elements, you can utilize offsetHeight. This method factors in vertical padding and borders too: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 2

To obtain the height of both inline and block elements, you can utilize offsetHeight. This method factors in vertical padding and borders too: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Answer 3

Retrieve the line height value of an element using

window.getComputedStyle(mySpan).lineHeight

, regardless of whether the style is specified inline or in an external CSS file.

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

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

Answer 4

Retrieve the line height value of an element using

window.getComputedStyle(mySpan).lineHeight

, regardless of whether the style is specified inline or in an external CSS file.

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

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

Answer 5

When working with CSS properties in JavaScript objects, those with a hyphen (-) are represented in camelCase. For example, mySpan.style.lineHeight.

Alternatively, you can use bracket notation to access the property. For instance, 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>

Answer 6

When working with CSS properties in JavaScript objects, those with a hyphen (-) are represented in camelCase. For example, mySpan.style.lineHeight.

Alternatively, you can use bracket notation to access the property. For instance, 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>