HTML DOM Style transitionProperty प्रॉपर्टी

विवरण

HTML DOM Style transitionProperty प्रॉपर्टी HTML दस्तावेज़ में किसी तत्व के लिए ट्रांजिशन प्रभाव किस CSS प्रॉपर्टी पर है, इसका नाम प्राप्त और संशोधित करती है।

सिंटैक्स

1. transitionProperty प्राप्त करना

object.transitionProperty

2. transitionProperty संशोधित करना

object.transitionProperty = "value"

यहां value निम्नलिखित हो सकते हैं:

उदाहरण

आइए HTML DOM Style transitionProperty प्रॉपर्टी का एक उदाहरण देखें:

<!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 प्रॉपर्टी डेमो</h1> 
<div class='circle'></div> 
<button onclick="set()" class="btn">TransitionProperty बदलें</button> 
<div class="show">अब, वर्ग पर होवर करें</div> 
<script> 
  function set() { 
    document.querySelector('.circle').style.transitionProperty = "border-radius"; 
  } 
</script> </body> </html>

आउटपुट

"TransitionProperty बदलें" बटन पर क्लिक करें और फिर "लाल" वर्ग पर होवर करके transitionProperty प्रभाव देखें।