HTML DOM Style objectPosition प्रॉपर्टी वापस आती है और संशोधित करती है कि किसी HTML दस्तावेज़ में किसी छवि या वीडियो तत्व को अपने स्वयं के सामग्री बॉक्स में कैसे रखा जाना चाहिए।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. रिटर्निंग ऑब्जेक्ट पोजीशन
object.objectPosition
2. ऑब्जेक्ट पोजीशन को संशोधित करना
object.objectPosition = “value”
यहाँ, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| आरंभिक | इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया। |
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| स्थिति | यह अपने सामग्री बॉक्स के अंदर छवि या वीडियो तत्व की स्थिति का प्रतिनिधित्व करता है। |
आइए हम HTML DOM Style objectPosition संपत्ति का एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.img-class {
width: 200px;
height: 250px;
object-fit: cover;
}
</style>
<body>
<h1 style="text-align:center">DOM Style objectPosition Property Demo</h1>
<img alt="Learn Java Swing" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="set()">Set objectPosition</button>
<script>
function set() {
document.querySelector('.img-class').style.objectPosition = "100% 100%";
}
</script>
</body>
</html> आउटपुट
“ऑब्जेक्ट स्थिति सेट करें . पर क्लिक करें छवि तत्व पर वस्तु स्थिति गुण सेट करने के लिए बटन -
