HTML DOM स्टाइल पोजीशन प्रॉपर्टी एक HTML दस्तावेज़ में HTML तत्व द्वारा उपयोग की जाने वाली पोजिशनिंग विधि को लौटाती है और संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. वापसी की स्थिति
object.position
2. स्थिति को संशोधित करना
object.position = “value”
यहाँ, मान हो सकता है -
<टेबल> <थेड>यह इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट करता है।
यह इस संपत्ति मूल्य को अपने मूल तत्व से प्राप्त करता है।
इसमें, तत्व दस्तावेज़ प्रवाह में दिखाई देने के क्रम में प्रस्तुत होंगे।
इसमें, तत्व दस्तावेज़ में अपने पहले स्थित पूर्वज तत्व के सापेक्ष स्थित होगा।
इसमें, तत्व दस्तावेज़ में ब्राउज़र विंडो के सापेक्ष स्थित होगा।
इसमें, तत्व दस्तावेज़ में अपनी सामान्य स्थिति के सापेक्ष स्थित होगा।
इसमें, तत्व दस्तावेज़ में उपयोगकर्ता की स्क्रॉल स्थिति के अनुसार स्थित होगा
आइए HTML DOM स्टाइल पोजीशन प्रॉपर्टी का एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.square {
width: 100px;
height: 100px;
background: #db133a6b;
top: 150px;
left: 50%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html> आउटपुट
“स्थिति सेट करें . पर क्लिक करें गुलाबी . की स्थिति सेट करने के लिए बटन वर्ग।
