एचटीएमएल डोम स्टाइल ट्रांज़िशनप्रॉपर्टी प्रॉपर्टी एक तत्व की सीएसएस प्रॉपर्टी के नाम को लौटाती है और संशोधित करती है, संक्रमण प्रभाव एक HTML दस्तावेज़ में होता है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
<मजबूत>1. रिटर्निंग ट्रांज़िशनप्रॉपर्टी
object.transitionProperty
<मजबूत>2. ट्रांज़िशनप्रॉपर्टी को संशोधित करना
object.transitionProperty = “value”
यहाँ मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| प्रारंभिक | इसने इस गुण मान को इसके डिफ़ॉल्ट मान पर सेट किया है। |
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| सभी | यह सभी संपत्तियों पर संक्रमण प्रभाव सेट करता है। |
| संपत्ति | यह CSS गुणों की सूची का प्रतिनिधित्व करता है। |
| कोई नहीं | यह कोई संपत्ति नहीं का चयन करता है। |
आइए हम 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;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 1s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionProperty Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Change TransitionProperty</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionProperty = "border-radius";
}
</script>
</body>
</html> आउटपुट
“संक्रमण संपत्ति बदलें . पर क्लिक करें ” बटन पर क्लिक करें और फिर “लाल . पर होवर करें संक्रमण संपत्ति प्रभाव देखने के लिए वर्ग।
