Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the width of the top border with JavaScript?
In this tutorial, we will learn how to set the width of the top border with JavaScript.
The border of an element is the outer part of the element. The border width for each side can be set with different JavaScript properties. For example, to set the width of the top border in JavaScript, use the borderTopWidth property.
There are two approaches to specifying the width of the top border −
Using the setProperty method
Using the borderTopWidth property
Using the setProperty method to set the width of the top border
In JavaScript, any property of an element, whether a new or existing property, can be set by the setProperty method. This method is a part of the style property of the element object of an element. It takes a property name and a value in the arguments and sets the property as per the provided value. For example, to set the width of the top border of an element, the setProperty method takes ‘border-top-width’ as the first argument, and in the second argument, it takes the value.
Syntax
document.getElementById('item').style.setProperty(name, value, priority)
In the above syntax, we use the setProperty method and the document.getElementById() method to set a property of an element that has the id as ‘item’.
Parameters
name − The name of the modifying property.
value − The modifying value of the property.
priority − The priority of the property value (optional).
Example
In the below example, the width of an element’s top border defines using the setProperty method. We have used a button “Set Top Border Width” that executes the “setTopBorderWidth()” function on the click event. This function sets the width of the top border of multiple elements.
<html> <head> <style> div { padding: 15px; margin-top: 5px; background-color: rgb(244, 250, 159); border: 2px solid orange } </style> </head> <body> <h2> Using the <i> setProperty method </i> to set the width of the top border of an element </h2> <button onclick="setTopBorderWidth()"> Set Top Border Width </button> <div id="item1"> item 1 </div> <div id="item2"> item 2 </div> <div id="item3"> item 3 </div> <div id="item4"> item 4 </div> <script> // all elements const item1 = document.getElementById('item1') const item2 = document.getElementById('item2') const item3 = document.getElementById('item3') const item4 = document.getElementById('item4') // 'Set Top Border Width' button click event handler function function setTopBorderWidth() { item1.style.setProperty('border-top-width', 'thin') item1.innerHTML = 'item 1 (top border width: thin)' item2.style.setProperty('border-top-width', 'medium') item2.innerHTML = 'item 2 (top border width: medium)' item3.style.setProperty('border-top-width', 'thick') item3.innerHTML = 'item 3 (top border width: thick)' item4.style.setProperty('border-top-width', '10px') item4.innerHTML = 'item 4 (top border width: 10px)' } </script> </body> </html>
Using the borderTopWidth property to set the width of the top border
In JavaScript, the borderTopWidth property is used to set the width of the top border of an element. This property takes values such as thin, medium, thick, or length units as this property is available in the element object so that the document.getElementById() method is used to retrieve the element object then we use the borderTopWidth property to set the width of the top border.
Syntax
document.getElementById('item').style.borderTopWidth = thin | medium | thick | length | inherit | initial
In the above syntax, the borderTopWidth property is used to set the width of the top border.
Parameters
thin − It defines a thin top border width.
medium − It defines a medium top border width (Default value).
thick − It defines a thick top border width.
length − The width of the top border in unit length.
inherit − The top border width is inherited by its parent element.
initial − The top border width of the element sets to default.
Example
In the below example, we set the width of the top border of an element with JavaScript using the borderTopWidth property. The width of the top border is set by an input field where the user can put their desired value. The “Set Top Border Width” button has a click event assigned to it that calls the “setTopBorderWidth()” function. This function sets the input field value as the width of the top border.
<html> <head> <style> div { padding: 15px; margin-top: 5px; background-color: rgb(244, 250, 159); border: 2px solid orange } </style> </head> <body> <h3> Using the <i> borderTopWidth property </i> to set the width of the top border of an element </h3> <p> Enter the width of the top border of the element (in px): </p> <input type="text" id="width-input" name="width-input" value="20px"> <button onclick="setTopBorderWidth()"> Set Top Border Width </button> <div id="root"> item 1 </div> <script> // 'Set Top Border Width' button click event handler function function setTopBorderWidth() { const root = document.getElementById('root') // input field value let width = document.getElementById('width-input').value root.style.borderTopWidth = width root.innerHTML = 'item 1 (top border width: ' + width + ')' } </script> </body> </html>
In this tutorial, we have learned how to set the width of the top border with JavaScript. In addition, we learned the setProperty method and borderTopWidth property. Users can follow any of these as per their requirements.
162 Views
