HTML DOM paddingLeft प्रॉपर्टी HTML एलिमेंट में बाएं पैडिंग को रिटर्न करने और जोड़ने के लिए उपयोग की जाती है।
सिंटैक्स
निम्नलिखित सिंटैक्स है −
1. बाएं पैडिंग रिटर्न करना
object.style.paddingLeft
2. बाएं पैडिंग जोड़ना
object.style.paddingLeft=”value”
मान
यहां, “value” निम्नलिखित हो सकता है −
| मान | विवरण |
|---|---|
| length | यह लंबाई इकाई में पैडिंग मान को परिभाषित करता है। |
| initial | यह पैडिंग को उसके डिफ़ॉल्ट मान पर परिभाषित करता है। |
| inherit | इसमें पैडिंग अपने पैरेंट एलिमेंट से विरासत में मिलती है। |
| percentage(%) | यह पैरेंट एलिमेंट की चौड़ाई के प्रतिशत में पैडिंग को परिभाषित करता है। |
उदाहरण
आइए paddingLeft प्रॉपर्टी का एक उदाहरण देखें −
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>HTML DOM paddingLeft प्रॉपर्टी</title> <style> .outer-box{ background-color:#db133a; width:300px; height:300px; margin:1rem auto; } .inner-box{ background-color:#C3C3E6; width:150px; height:150px; } </style> </head> <body> <h1>paddingLeft प्रॉपर्टी उदाहरण&t;/h1> <div class="outer-box"> <div class="inner-box"> </div> </div> <button type="button" onClick='addPadding()'>पैडिंग जोड़ें</button> <script> function addPadding(){ var outerBox=document.querySelector('.outer-box') outerBox.style.paddingLeft='20px'; console.log(outerBox.style.paddingLeft); } </script> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा −
लाल बॉक्स के अंदर पैडिंग जोड़ने के लिए “पैडिंग जोड़ें” बटन पर क्लिक करें।
उपरोक्त कोड कंसोल पर निम्नलिखित भी प्रदर्शित करेगा −
