Javascript padding margin border

Javascript DOM Style padding Property

The padding property gets and sets the padding of an element.

Both the margin property and the padding property insert space around an element.

The margin inserts the space around/outside the border, while padding inserts the space within the border of an element.

This property can take from one to four values:

all four sides will have a padding of 50px

• the top padding will be 50px,
• left and right padding will be 10px,
• bottom padding will be 20px

• the top padding will be 50px,
• right padding will be 10px,
• bottom padding will be 20px,
• left padding will be 30px

Browser Compatibility

Syntax

Return the padding property:

let a = object.style.padding;

object.style.padding= "%|length|initial|inherit" 

Property Values

Value	Description
%	the padding in % of the width of the parent element
length	the padding in length units
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Default Value

Return Value

A String, representing the padding of an element.

More Examples

Change the padding of all four sides of a element to «25px»:

document.getElementById("myDiv").style.padding = "25px";

!DOCTYPE html> html> head> style> #myDiv !-- w ww . d e m o 2 s. c o m --> border: 1px solid #FF0000; padding: 2cm 4cm 3cm 2cm; >  body> div id="myDiv">This is a div. br> button type="button" onclick="myFunction()">Change padding  script> function myFunction() < document.getElementById("myDiv").style.padding = "25px"; >   

Example

Return the padding of a element:

console.log(document.getElementById("myDiv").style.padding);

!DOCTYPE html> html> head> style> #myDiv !-- w w w . d e m o 2 s . c o m --> border: 1px solid #FF0000; >  body> div id="myDiv" style="padding:2cm 4cm 3cm 5cm;">This is a div. br> button type="button" onclick="myFunction()">Return padding  p id='demo'>  script> function myFunction() < document.getElementById('demo').innerHTML = document.getElementById("myDiv").style.padding; >   

Example

Difference between the margin property and the padding property:

function changeMargin() < document.getElementById("myDiv").style.margin = "100px"; > function changePadding() < document.getElementById("myDiv2").style.padding = "100px"; >

!DOCTYPE html> html> head> style> div !-- w w w . de m o 2 s . c o m --> border: 1px solid #FF0000; >  body> div id="myDiv">This is some text. br> button type="button" onclick="changeMargin()"> Change margin of the div element br> br> div id="myDiv2">This is some text. br> button type="button" onclick="changePadding()"> Change padding of the div element script> function changeMargin() < document.getElementById("myDiv").style.margin = "100px"; > function changePadding() < document.getElementById("myDiv2").style.padding = "100px"; >   

Related

• Javascript DOM Style overflow Property
• Javascript DOM Style overflowX Property
• Javascript DOM Style overflowY Property
• Javascript DOM Style padding Property
• Javascript DOM Style paddingBottom Property
• Javascript DOM Style paddingLeft Property
• Javascript DOM Style paddingRight Property

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

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.

Источник