How to set the color of the outline around an element with JavaScript?

JavascriptFront End ScriptsWeb Development

<p style="">To set the outline color, use the <em>outlineColor</em> property. You can try to run the following code to set the color of the outline around an element with JavaScript:</p><h2>Example</h2><p style=""><a href="http://tpcg.io/Xa5RsQ" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><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;#box { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 450px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 3px solid red; &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;Click below to add Outline Color.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;box&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;This is a div. This is a div. This is a div. This is a div. This is a div.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;br&gt; &nbsp; &nbsp; &nbsp; &lt;button type=&quot;button&quot; onclick=&quot;display()&quot;&gt;Set Outline Color&lt;/button&gt; &nbsp; &nbsp; &nbsp; &lt;br&gt; &nbsp; &nbsp; &nbsp; &lt;script&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function display() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;box&quot;).style.outline = &quot;thick solid&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(&quot;box&quot;).style.outlineColor = &quot;#5F5F5F&quot;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/script&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 24-Jan-2020 06:47:38

Advertisements