How to set the CSS property that the transition effect is for with JavaScript?

---

<p style="">Use the <em>transitionProperty</em><em>&nbsp;</em>in JavaScript to set the CSS property. You can try to run the following code to return the CSS property that the transition effect is for with JavaScript &minus;</p><h2>Example</h2><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#div1 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 10px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 300px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 400px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid blue; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#div2 { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 80px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid BLUE; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: yellow; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotateY(45deg); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 3s; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#div2:hover { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 100px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;Hover over DIV2&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;button onclick = &quot;display()&quot;&gt; Set &lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;div id = &quot;div1&quot;&gt;DIV1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div id=&quot;div2&quot;&gt;DIV2&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function display() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;div2&quot;).style.transitionProperty = &quot;width,height&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• Set the name of the CSS property the transition effect is for
• Set a delay for the CSS transition effect
• How to set the speed curve of the transition effect with CSS
• How to delay the Transition Effect with CSS
• How to set the speed curve of the transition effect with JavaScript?
• How to set when the transition effect will start with JavaScript?
• Add CSS transition effect for both the width and height property
• How to create a transition effect with CSS?
• How to set the four transition properties with JavaScript?
• CSS Transition property
• Set how many seconds or milliseconds a CSS transition effect takes to complete
• Create a transition effect on hover pagination with CSS
• Set the speed of the hover effect with CSS
• CSS transition-duration property
• Set Mask Effect with CSS