How to Change Bottom Border of Div in JavaScript?

Long Answer
Views 176

Answer:

JavaScript – Change the Bottom Border of Div

To change the bottom border of a div using JavaScript, get reference to the element, and assign required value to the element.style.borderBottom property.

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln"> 
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;h2&gt;</span><span class="pln">Change Bottom Border of Div in JavaScript</span><span class="tag">&lt;/h2&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;p&gt;</span><span class="pln">This is a paragraph in Div.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
        </span><span class="tag">&lt;span&gt;</span><span class="pln">This is a span in Div.</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;br&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">changeStyle</span><span class="pun">()</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Click Me</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</span><span class="pln">
    </span><span class="kwd">function</span><span class="pln"> changeStyle</span><span class="pun">(){</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myDiv"</span><span class="pun">);</span><span class="pln">
        element</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">borderBottom </span><span class="pun">=</span><span class="pln"> </span><span class="str">"1px solid red"</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span>

Related Articles:

This section is dedicated exclusively to Questions & Answers. For an in-depth exploration of JavaScript, click the links and dive deeper into this subject.

Go to Question List

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF