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

JavascriptObject Oriented ProgrammingFront End Technology

<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>
raja
Updated on 23-Jun-2020 11:30:59

Advertisements