Javascript height with margin

How to get the rendered height of an element ?

To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height.

• style.height
• jQuery( height, innerHeight, outerHeight )
• clientHeight, offsetHeight, scrollHeight
• getComputedStyle
• getBoundingClientRect().height

Rendered height is the height that the element gets finally after all the styles and transformations are applied on that element. For example, An element has height of 100px and then gets a transform:scale(0.5). Its rendered height is 50px (after the transformation) and layout height is 100px.

style.height We can use style.height on any selected element and it will return its height. Does not include the padding, border or margin. Italways return the height along with the specific unit.

Note: Only works if we explicitly set the height as inline using the style attribute in HTML.

let height = document.getElementById("someId").style.height;

HTML

Output:
It returns empty string for “div1” and it returns “100px” for “div2”

• For “div1”:
• For “div2”:

Conclusion: It returns whatever height is specified in inline style attribute only. It does not factor in any transformations, like scale. It is not reliable and should not be used as inline styles are not ideal.

jQuery(height, innerHeight, outerHeight)
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value.

Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.

HTML

Output:
It returns unit-less pixel value as 100.

Output:

innerHeight() It returns the current height of the element including the top and bottom padding but not border. It always returns a unit-less pixel value.

let height = $("#div1").innerHeight();

HTML

Output:
It returns 120 which is (10(top padding) + 100(content height) + 10(bottom-padding))

outerHeight() It returns the current height of the element including the padding, border and margin optionally. It always returns a unit-less pixel value.

let height = $("#div1").outerHeight(); let height = $("#div1").outerHeight();

HTML

(1(top border)+ 10(top padding)+ 100(content height)+1 0(bottom-padding)+ 1(bottom border)

Note: The value reported by height(), innerHeight() and outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get accurate results, ensure the element is visible before using these methods. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.

// If you need height of div excluding margin/padding/border $('#div1').height(); // If you need height of div with padding but without border + margin $('#div1').innerHeight(); // If you need height of div including padding and border $('#div1').outerHeight(); // For including border + margin + padding, can use $('#div1').outerHeight(true);

All these return only the layout height, not the rendered height.

clientHeight, offsetHeight, scrollHeight
clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.

let height = document.getElementById("div1").clientHeight;

Источник

How to get element width/height with margin, padding, border in native javascript (no jquery)?

Getting the width and height of an HTML element is a common requirement in web development. However, it can sometimes be tricky to get the correct dimensions when margins, padding, and borders are added to the element. In this scenario, the element’s CSS box model affects the dimensions that are returned by the JavaScript code. To get the correct width and height of an element in native JavaScript (without using jQuery), several methods can be used. Here are some of the most commonly used solutions:

Method 1: offsetWidth and offsetHeight

To get the width and height of an element including its margin, padding, and border in Native JavaScript without jQuery, you can use the offsetWidth and offsetHeight properties. Here’s how:

// Get the element const element = document.getElementById('my-element'); // Get the width including margin, padding, and border const width = element.offsetWidth; // Get the height including margin, padding, and border const height = element.offsetHeight;

You can also use these properties to get the width and height of the entire document:

// Get the width of the entire document const documentWidth = document.documentElement.offsetWidth; // Get the height of the entire document const documentHeight = document.documentElement.offsetHeight;

Note that offsetWidth and offsetHeight return values in pixels, and include the width and height of the element’s border, padding, and content. If you only want to get the width and height of the content, excluding the padding and border, you can use the clientWidth and clientHeight properties instead.

// Get the width of the element's content const contentWidth = element.clientWidth; // Get the height of the element's content const contentHeight = element.clientHeight;

Method 2: getComputedStyle

To get the element width/height with margin, padding, and border in Native JavaScript (no jQuery), you can use the getComputedStyle method. Here is the step-by-step guide:

1. First, select the element that you want to get the dimensions for. You can use document.querySelector or any other method to select the element.

const element = document.querySelector('#my-element');

1. Next, use the getComputedStyle method to get the computed styles for the element. This will include the dimensions with padding, border, and margin.

const styles = window.getComputedStyle(element);

1. To get the width of the element including padding, border, and margin, you can use the getPropertyValue method on the styles object and pass in the width property.

const width = styles.getPropertyValue('width');

1. To get the height of the element including padding, border, and margin, you can use the same method but pass in the height property.

const height = styles.getPropertyValue('height');

1. Finally, to get the margin, padding, and border values individually, you can use the same method but pass in the respective property names.

const margin = styles.getPropertyValue('margin'); const padding = styles.getPropertyValue('padding'); const border = styles.getPropertyValue('border');

Here is the complete code example:

const element = document.querySelector('#my-element'); const styles = window.getComputedStyle(element); const width = styles.getPropertyValue('width'); const height = styles.getPropertyValue('height'); const margin = styles.getPropertyValue('margin'); const padding = styles.getPropertyValue('padding'); const border = styles.getPropertyValue('border');

Note that the values returned by getPropertyValue will include the units (e.g. «10px» or «2em»). If you need to use these values for calculations, you may need to parse out the units using regular expressions or other methods.

Method 3: ClientRect

To get the element width/height with margin, padding, and border in Native JavaScript, we can use the getBoundingClientRect() method. This method returns the size of an element and its position relative to the viewport.

1. First, select the element you want to get the size of. For example, let’s select a div element with an id of myDiv .

const myDiv = document.getElementById('myDiv');

1. Next, use the getBoundingClientRect() method to get the size of the element. This method returns an object with properties for the element’s position and size.

const rect = myDiv.getBoundingClientRect();

1. The rect object contains several properties that give us information about the element’s size and position. The properties we’re interested in are width and height . These properties give us the element’s size including padding and border, but not margin.

const width = rect.width; const height = rect.height;

1. To get the size including margin, we need to add the margin to the width and height. We can use the getComputedStyle() method to get the element’s computed styles, including the margin.

const styles = window.getComputedStyle(myDiv); const marginTop = parseFloat(styles.marginTop); const marginBottom = parseFloat(styles.marginBottom); const marginLeft = parseFloat(styles.marginLeft); const marginRight = parseFloat(styles.marginRight); const widthWithMargin = width + marginLeft + marginRight; const heightWithMargin = height + marginTop + marginBottom;

const myDiv = document.getElementById('myDiv'); const rect = myDiv.getBoundingClientRect(); const width = rect.width; const height = rect.height; const styles = window.getComputedStyle(myDiv); const marginTop = parseFloat(styles.marginTop); const marginBottom = parseFloat(styles.marginBottom); const marginLeft = parseFloat(styles.marginLeft); const marginRight = parseFloat(styles.marginRight); const widthWithMargin = width + marginLeft + marginRight; const heightWithMargin = height + marginTop + marginBottom;

That’s it! Now you know how to get the element width/height with margin, padding, and border in Native JavaScript using the getBoundingClientRect() method.

Method 4: using a custom solution

To get the width and height of an element with its padding, margin and border in Native JavaScript, you can use the getComputedStyle method and some basic math. Here is how you can do it using a custom solution:

// Get the element const element = document.getElementById('your-element-id'); // Get the computed styles of the element const styles = window.getComputedStyle(element); // Get the padding, border and margin values const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight); const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom); const borderX = parseFloat(styles.borderLeftWidth) + parseFloat(styles.borderRightWidth); const borderY = parseFloat(styles.borderTopWidth) + parseFloat(styles.borderBottomWidth); const marginX = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight); const marginY = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom); // Calculate the width and height const width = element.offsetWidth - paddingX - borderX; const height = element.offsetHeight - paddingY - borderY; // Add the margin values to the width and height width += marginX; height += marginY;

In this code, we first get the element we want to measure using document.getElementById . Then, we use the getComputedStyle method to get the computed styles of the element, which includes the padding, border and margin values. We use parseFloat to convert these values from strings to numbers.

Next, we calculate the total padding, border and margin values by adding the left and right (or top and bottom) values together. We then subtract these values from the offsetWidth and offsetHeight of the element to get the width and height without padding and border.

Finally, we add the margin values back to the width and height to get the final values.

Note that this solution assumes that the element has no transform applied to it. If it does, you may need to use a different approach.

Источник

How to get the full height of a HTML element including border, padding and margin with JavaScript?

Sometimes, we want to get the full height of a HTML element including border, padding and margin with JavaScript.

In this article, we’ll look at how to get the full height of a HTML element including border, padding and margin with JavaScript.

How to get the full height of a HTML element including border, padding and margin with JavaScript?

To get the full height of a HTML element including border, padding and margin with JavaScript, we can use the getComputedStyle method.

const el = document.querySelector("div"); let elHeight = el.offsetHeight; elHeight += parseInt( window.getComputedStyle(el).getPropertyValue("margin-top") ); elHeight += parseInt( window.getComputedStyle(el).getPropertyValue("margin-bottom") ); console.log(elHeight); 

to get the div with querySelector .

Then we get the height of it without the margins with offsetHeight .

Next, we call getComputedStyle with el to get the margin top and margin bottom values of the div.

And then we add them to elHeight .

Conclusion

To get the full height of a HTML element including border, padding and margin with JavaScript, we can use the getComputedStyle method.

Источник