Javascript getelementbyid style padding

How to set the padding of an element with JavaScript?

All of us know that there are margins and padding available in JavaScript. Then, what exactly is the padding of an element?

Padding can be termed as the space between an element’s content and its border, whereas margin adds space around the edge.

Use the padding property in JavaScript to set the padding of an element

Let us check out the method to set the padding.

Using the Style padding Property

In this section, let us discuss the padding property. We can specify padding in pixels(px), points(pt), percentage(%), centimeters (cm), etc. Padding property works as follows.

padding: 10px; Sets 10px padding to the top, right, bottom, and left of the element.

padding: 10px 20px; Sets 10px padding to the top and bottom of the element. Sets 20px padding to the right and left of the element.

padding: 10px 20px 30px; Sets 10px padding on top of the element. Sets 20px padding to the right and left of the element. Sets 30px padding to the bottom of the element.

padding: 10px 20px 30px 40px; Sets 10px to top, 20px to right, 30px to bottom, and 40px to the left of the element.

Syntax

Following is the syntax to set the padding of an element using the padding property in JavaScript −

object.style.padding = "%|length|initial|inherit|revert|revert-layer|unset"

The syntax above sets the padding value to the element’s style attribute. The padding value is 0 by default. The return term is a string that represents the padding value.

Parameters

• % − Padding in the percentage of the parent element’s width.
• length − Padding value. It must be a positive value. Does not work on table-rowgroup, table-header-group, table-footer-group, table-row, table-column-group, and table-column. Works on ::first-letter and ::first-line.
• initial − Default value.
• inherit − Takes the property value from the parent element

Example 1

This program has a div tag for which we will set the padding. When the user press the button, we call the function to set the padding using the syntax given above.

html> head> style> #padEl border: 5px solid #000000; background-color: #9400D3; color: #FFFFFF; > /style> /head> body> p> Setting the padding of an element using i>the padding /i>property/p> div id = "padBtnWrap"> p> Click the "Set it" button /p> button onclick="setPadding()"> Set it /button> /div> br>br> div id = "padEl">Hello, set padding for me./div> script> function setPadding() var padEle=document.getElementById("padEl"); var padBtEle=document.getElementById("padBtnWrap"); padEle.style.padding="10px 20px 30px 40px"; padEle.innerHTML="Padding set as 10px 20px 30px 40px."; padBtEle.style.display="none"; > /script> /body> /html> 
 

Example 2

In this program, we have a div element whose padding value is set already. When the user clicks on the button, we call the function to display the padding using the syntax above.

html> head> style> #padEl border: 10px solid #696969; background-color: #556B2F; color: #FFFFFF; font-weight: bold; > /style> /head> body> h4> Get the padding of an element using thei> padding/i>property/h4> div id="padBtnWrap" p> Click the "Get it" button /p> button onclick="getPadding()">Get it/button> /div> br>br> div id="padEl" style="padding: 40px 30px 20px 10px;"> Hello, get padding for me. /div> br>br> div id="padOp">/div> script> function getPadding() var padVal=document.getElementById("padEl").style.padding; document.getElementById("padOp").innerHTML="The padding is token operator">+ padVal; document.getElementById("padBtnWrap").style.display="none"; > /script> /body> /html> 
 

Example 3

In this example, we are getting the padding value and padding option from the user. When the user provides the required input and clicks on the button, we call the function to set the user-specified padding value to the element.

html> head> style> #padUsrEl border: 10px solid #8A2BE2; background-color: #5F9EA0; > #padUsrErr color: red; font-weight:bold; display: none; > /style> /head> body> h4> Set user-specified padding of an element using the i>padding/i> property /h4> div id = "padUsrBtnWrap" p> Enter a padding value and click on the button /p> input name="padUsrTxt" type="text" id="padUsrTxt" placeholder="Enter like 1px 1em 1% 1cm"/> br>br> button onclick="setUserPadding()"> Set it /button> /div> br> div id="padUsrErr"> Please provide input and click on the button /div> br>br> div id="padUsrEl"> I am a div element. /div> br>br> script> function setUserPadding()  var padVal; var padTxtVal=document.getElementById('padUsrTxt').value; if(padTxtVal=="") document.getElementById("padUsrErr").style.display="block"; else padVal=padTxtVal; document.getElementById("padUsrEl").style.padding=padVal; document.getElementById("padUsrEl").innerHTML="Padding set to " + padVal; document.getElementById("padUsrErr").style.display="none"; > > /script> /body> /html> 
 

In this tutorial, we have discussed the padding property to set the padding of an element in JavaScript.

The padding property is a built-in property in JavaScript and is very easy for the coders to use.

Источник

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.

Источник

Changing Padding Using Javascript

When you create a webpage, and it is loaded on the browser, everything looks good. However, when the user interacts with your webpage, the perfect look may change or become distorted.

There are two ways you can go about doing this.

So, you want to make changes to the amount of padding once a user adds something on a web page. Therefore, it is important to know how to make such changes using javascript.

1. Using CSS and Javascript

Identify the element that need a change in the amount of padding.

 
This is the a div element that we shall change its padding size
 

Create a CSS class with the new padding that you want to be applied.

We are now going to add the new padding. We just add the class to our element that need changing through Javascript.

document.getElementById("changing-div").className = "change-padding"; 

2: Using Javascript only

We can make padding changes to a html element directly through javascript.

Javascript already has methods that can be used to make such changes. So let do this.

To make change all the paddings use .style.padding:

document.getElementById("changing-div").style.padding="30px 50px 30px 50px"; 

To change the top padding only use .style.paddingTop:

document.getElementById("changing-div").style.paddingTop="30px"; 

To change the right padding only use .style.paddingRight:

document.getElementById("changing-div").style.paddingRight="50px"; 

To change the bottom padding only use .style.paddingBottom:

document.getElementById("changing-div").style.paddingBottom="30px"; 

To change the left padding only use .style.paddingLeft:

document.getElementById("changing-div").style.paddingLeft="50px"; 

You may want to revert to the previous padding size if the user undos the previous action. To do this you will have to undo the changes you made.

For method 1, you just need to remove the class you added from the HTML element.

document.getElementById("changing-div").classList.remove("change-padding"); 

For method 2, you will need to set the padding to the previous size.

To revert all padding to its previous state use .style.padding:

document.getElementById("changing-div").style.padding="20px 30px 20px 30px"; 

To revert the top padding only to its previous state use .style.paddingTop:

document.getElementById("changing-div").style.paddingTop="20px"; 

To revert the right padding only to its previous state use .style.paddingRight:

document.getElementById("changing-div").style.paddingRight="30px"; 

To revert the bottom padding to its previous state only use .style.paddingBottom:

document.getElementById("changing-div").style.paddingBottom="20px"; 

To change the left padding only use .style.paddingLeft:

document.getElementById("changing-div").style.paddingLeft="30px"; 

• it keeps the CSS and Javascript seperate.
• it uses the CSS and Javascript information I already know.
• Remember everything will work fine whichever method you use.
• if I am going to revert to previous set padding, I find it easier.

However, which ever method you choose, both methods will work.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник