如何使用 JavaScript 设置元素的填充?
在本教程中，我们将介绍使用 JavaScript 设置元素填充的方法。
我们都知道 JavaScript 中有边距和 填充。那么，元素的填充到底是什么?
填充 可以称为元素内容与其边框之间的空间，而边距则在边缘周围添加空间。
使用 JavaScript 中的 padding 属性设置元素的填充
让我们来看看设置填充的方法。
使用 Style padding 属性
在本节中，让我们讨论 padding 属性。我们可以以像素 (px)、点 (pt)、百分比 (%)、厘米 (cm) 等为单位指定填充。Padding 属性的工作方式如下。
padding: 10px; 在元素的顶部、右侧、底部和左侧设置 10px 填充。
padding: 10px 20px; 在元素的顶部和底部设置 10px 填充。在元素的右侧和左侧设置 20px 填充。
padding: 10px 20px 30px; 在元素顶部设置 10px 填充。在元素的右侧和左侧设置 20px 填充。将元素底部的内边距设置为 30px。
padding: 10px 20px 30px 40px; 将元素顶部设置为 10px，右侧设置为 20px，底部设置为 30px，左侧设置为 40px。
语法
以下是使用 JavaScript 中的 padding 属性设置元素内边距的语法 -
object.style.padding = "%|length|initial|inherit|revert|revert-layer|unset"
上述语法将内边距值设置为元素的 style 属性。默认情况下，内边距值为 0。返回项是一个表示填充值的字符串。
参数
- % − 以父元素宽度的百分比表示的填充。
- length − 填充值。必须为正值。不适用于 table-rowgroup、table-header-group、table-footer-group、table-row、table-column-group 和 table-column。适用于 ::first-letter 和 ::first-line。
- initial − 默认值。
- inherit − 从父元素获取属性值
示例 1
此程序有一个 div 标签，我们将为其设置填充。当用户按下按钮时，我们会调用该函数，使用上面给出的语法来设置填充。
<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>
示例 2
在此程序中，我们有一个 div 元素，其 padding 值已设置。当用户点击按钮时，我们调用函数使用上述语法显示 padding。
<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 the<i> 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=" + padVal; document.getElementById("padBtnWrap").style.display="none"; } </script> </body> </html>
示例 3
在此示例中，我们从用户那里获取填充值和填充选项。当用户提供所需输入并点击按钮时，我们会调用该函数将用户指定的填充值设置为元素。
<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>
在本教程中，我们讨论了使用 padding 属性来设置 JavaScript 中元素的填充。
padding 属性是 JavaScript 中的内置属性，程序员使用起来非常方便。
