HTML DOM स्टाइल, प्रॉपर्टी रिटर्न का आकार बदलता है और संशोधित करता है कि क्या तत्व HTML दस्तावेज़ में उपयोगकर्ता द्वारा आकार बदलने योग्य है या नहीं।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
रिटर्निंग आकार
object.style.resize
-
आकार बदलना
object.style.resize = “value”
मान
यहाँ, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| प्रारंभिक | इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया। |
| कोई नहीं | यह एक तत्व को आकार बदलने योग्य नहीं के रूप में सेट करता है। |
| क्षैतिज | यह तत्व की चौड़ाई को आकार बदलने योग्य के रूप में सेट करता है। |
| ऊर्ध्वाधर | यह तत्व की ऊंचाई को आकार बदलने योग्य के रूप में सेट करता है। |
| दोनों | यह तत्व की चौड़ाई और ऊंचाई को आकार बदलने योग्य के रूप में सेट करता है। |
उदाहरण
आइए हम HTML DOM स्टाइल रिसाइज प्रॉपर्टी का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.resize-div {
border: 2px solid #fff;
margin: 2rem auto;
width: 300px;
overflow: auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style resize Property Example</h1>
<div class="resize-div">
<p>I'm a paragraph element with some dummy text.</p>
</div>
<button onclick="add()" class="btn">Set resize</button>
<script>
function add() {
document.querySelector('div').style.resize = "both";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
"आकार बदलें सेट करें . पर क्लिक करें उपयोगकर्ता द्वारा div तत्व को आकार बदलने योग्य बनाने के लिए बटन।
