HTML DOM स्टाइल डिस्प्ले प्रॉपर्टी का उपयोग किसी तत्व के प्रदर्शन प्रकार को सेट करने या वापस करने के लिए किया जाता है। तत्व ज्यादातर ब्लॉक या इनलाइन होते हैं। आप डिस्प्ले का उपयोग करके तत्व को छिपा भी सकते हैं:कोई नहीं।
−
. के लिए वाक्य रचना निम्नलिखित हैप्रदर्शन गुण सेट करना -
object.style.display = value
उपरोक्त संपत्ति मूल्य को इस प्रकार समझाया गया है -
| मान <वें>विवरण | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| इनलाइन | तत्व को इनलाइन तत्व के रूप में प्रदर्शित करने के लिए यानी चौड़ाई और ऊंचाई के गुणों का कोई प्रभाव नहीं पड़ेगा। | |||||||||||||||||||||||
| block | Theblock एलीमेंट नई लाइन पर प्रदर्शित होता है और पूरी चौड़ाई लेता है। | |||||||||||||||||||||||
| सामग्री | यह केवल बाल तत्वों को प्रदर्शित करता है और मूल तत्व को गायब कर देता है जिससे बच्चे को DOM के सीधे बच्चे बन जाते हैं। | |||||||||||||||||||||||
| flex | ब्लॉक-स्तरीय फ्लेक्स कंटेनर के रूप में प्रदर्शित तत्व | |||||||||||||||||||||||
| grid | ब्लॉक-स्तरीय ग्रिड कंटेनर के रूप में प्रदर्शित तत्व | |||||||||||||||||||||||
| इनलाइन-ब्लॉक | Sameas inline लेकिन अब आप चौड़ाई और ऊंचाई मान लागू कर सकते हैं। | |||||||||||||||||||||||
| इनलाइन-फ्लेक्स | एक इनलाइन-स्तरीय फ्लेक्स कंटेनर के रूप में प्रदर्शित तत्व | |||||||||||||||||||||||
| इनलाइन-ग्रिड | एक इनलाइन-स्तरीय ग्रिड कंटेनर के रूप में प्रदर्शित तत्व | |||||||||||||||||||||||
| इनलाइन-टेबल | तत्व एक इनलाइन-स्तरीय तालिका के रूप में प्रदर्शित होता है | |||||||||||||||||||||||
| list-item | तत्व को | |||||||||||||||||||||||
| रन-इन | संदर्भ के आधार पर तत्व को ब्लॉक या इनलाइन के रूप में प्रदर्शित करें | |||||||||||||||||||||||
| तालिका | तत्व को
आइए डिस्प्ले प्रॉपर्टी के लिए एक उदाहरण देखें - उदाहरण<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding:10px;
background-color:lightblue;
display:flex;
flex-direction:right;
}
#flexSpan{
width:70px;
background-color:red;
margin:20px;
padding:10px;
}
</style>
<script>
function changeDisplay() {
document.getElementById("DIV1").style.display = "block";
document.getElementById("flexSpan").style.display = "block";
document.getElementById("Sample").innerHTML="The display is now changed to block for both the div and its inner Span elements";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>Change the display property of the above div and its inner elements by clicking the below button</p>
<button onclick="changeDisplay()">Change Display</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“प्रदर्शन बदलें . क्लिक करने पर ” -
|
