How to set the border of a div in jquery

In front-end development, the div element is a frequently used HTML tag. In order to beautify the web interface, we often need to add borders to divs. In jquery, we can set borders for divs by setting different css attribute values. In this article, we will learn how to set the border of a div using jquery.

1. Use the css() function

In jquery, we can use the css() function to set the css attribute of the div. We can set borders for divs by setting different css attribute values.

First, we need to set a CSS class for the div:

Hello World!

Then , in our jquery code, we can use the following code to set the border:

$(document).ready(function(){

$('.my-div').css({
    'border-style': 'solid',
    'border-width': '1px',
    'border-color': '#000000'
});

});

In this example, we first use the $(document).ready() function to make the jquery code execute after the document is ready. Then, we select the element with class "my-div" and use the css() function to set the values ​​of three css properties: border-style, border-width, and border-color. These attribute values ​​are used to set the border style, width and color of the div element.

2. Use the addClass() function

We can also use the addClass() function to dynamically add style classes to divs. This way you can easily define the border of the div in the style sheet and dynamically add style classes to the div when needed. The following is the sample code:

CSS style sheet:

.my-border {

border-style: solid;
border-width: 1px;
border-color: #000000;

}

HTML code:

< ;div class="my-div">Hello World!

Jquery code:

$(document).ready(function(){

$('.my-div').addClass('my-border');

});

In this example, we first use the $(document).ready() function to make the jquery code execute after the document is ready. Then, we select the element with class "my-div" and use the addClass() function to add a style class named "my-border" to it. This style class contains the border settings we need.

3. Use the style sheet

Finally, we can also set the border style for the div element directly in the style sheet. This method requires defining the div style in the style sheet, and then applying the style to the div element where we need to set the border by setting the element ID or class. The following is the sample code:

CSS style sheet:

.my-border {

border-style: solid;
border-width: 1px;
border-color: #000000;

}

HTML code:

< ;div class="my-div my-border">Hello World!