Padding function in javascript

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.

Источник

String.prototype.padStart()

The padStart() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. The padding is applied from the start of the current string.

Try it

Syntax

padStart(targetLength) padStart(targetLength, padString) 

Parameters

The length of the resulting string once the current str has been padded. If the value is less than or equal to str.length , then str is returned as-is.

The string to pad the current str with. If padString is too long to stay within the targetLength , it will be truncated from the end. The default value is the unicode «space» character (U+0020).

Return value

A String of the specified targetLength with padString applied from the start.

Examples

Basic examples

"abc".padStart(10); // " abc" "abc".padStart(10, "foo"); // "foofoofabc" "abc".padStart(6, "123465"); // "123abc" "abc".padStart(8, "0"); // "00000abc" "abc".padStart(1); // "abc" 

Fixed width string number conversion

// JavaScript version of: (unsigned) // printf "%0*d" width num function leftFillNum(num, targetLength)  return num.toString().padStart(targetLength, "0"); > const num = 123; console.log(leftFillNum(num, 5)); // "00123" 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

String.prototype.padEnd()

The padEnd() method pads the current string with a given string (repeated, if needed) so that the resulting string reaches a given length. The padding is applied from the end of the current string.

Try it

Syntax

padEnd(targetLength) padEnd(targetLength, padString) 

Parameters

The length of the resulting string once the current str has been padded. If the value is less than or equal to str.length , the current string will be returned as-is.

The string to pad the current str with. If padString is too long to stay within targetLength , it will be truncated: for left-to-right languages the left-most part and for right-to-left languages the right-most will be applied. The default value for this parameter is » » ( U+0020 ).

Return value

A String of the specified targetLength with the padString applied at the end of the current str .

Examples

Using padEnd

"abc".padEnd(10); // "abc " "abc".padEnd(10, "foo"); // "abcfoofoof" "abc".padEnd(6, "123456"); // "abc123" "abc".padEnd(1); // "abc" 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

JavaScript — element padding size in Vanilla JS

Imaan-Morin

In this short article, we would like to show how to get the current padding of an element using JavaScript.

Presented below examples return padding in pixels — even different unit was used in styles.

var element = document.querySelector('#my-element'); var style = element.currentStyle || window.getComputedStyle(element); console.log(parseInt(style.paddingLeft)); console.log(parseInt(style.paddingTop)); console.log(parseInt(style.paddingRight)); console.log(parseInt(style.paddingBottom));

1. Current style property example

This approach allows to get current style value (even was assigned with selector).

// ONLINE-RUNNER:browser;      
Text.
   

2. Reusable code example

This approach organized the above code in a reusable function.

// ONLINE-RUNNER:browser;       
Text.
   

Источник

Javascript Reference — HTML DOM Style padding Property

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

padding can have one to four values.

padding:10px 5px 15px 20px;

• top padding is 10px
• right padding is 5px
• bottom padding is 15px
• left padding is 20px

Browser Support

padding	Yes	Yes	Yes	Yes	Yes

Syntax

Return the padding property:

var v = object.style.padding;

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

Property Values

Value	Description
auto	Default value. The browser does the calculation.
length	Set width in px, cm, etc.
%	Set width in percent of the containing element
inherit	Inherit the width property from the parent element

Technical Details

Example

The following code shows how to Set the padding of a element:

 !DOCTYPE html> html> head> style> #myDiv !--from w ww .j a va2s . c om--> border: 1px solid #FF0000; >  body> div >"myDiv">This is a div. button type="button" onclick="myFunction()">test script> function myFunction() < document.getElementById("myDiv").style.padding = "50px 10px 20px 30px"; >   

The code above is rendered as follows:

Example 2

The following code shows how to change the padding of all four sides of a element to «25px».

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

The code above is rendered as follows:

Example 3

The following code shows how to return the padding of a element.

 !DOCTYPE html> html> head> style> #myDiv !-- w w w .j ava 2s . c o m--> border: 1px solid #FF0000; >  body> div >"myDiv" style="padding:2cm 4cm 3cm 5cm;">This is a div. button type="button" onclick="myFunction()">test script> function myFunction() < console.log(document.getElementById("myDiv").style.padding); >   

The code above is rendered as follows:

Example 4

The following code shows how to set the margin property and the padding property.

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

The code above is rendered as follows:

java2s.com | © Demo Source and Support. All rights reserved.

Источник