How to add `style=display:“block”` to an element using jQuery?
Last Updated : 19 Sep, 2024
To add the inline style style=”display: block” to HTML elements using jQuery, there are several approaches, each with its advantages. Below are the different methods you can use:
Using the CSS() method
The css() method allows you to directly apply CSS properties to selected elements by passing the property name and value as arguments.
Syntax:
$('element_selector').css('property_name', 'value');Example: The below example will illustrate the use of the css() method to add the style=”display: block” to an element using jQuery.
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”`to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .css()</h2> <div> <p style="display: none"> It is displayed using the style="display: block" property added using css() method. </p> <button>click to display</button> </div> <script> $('button').click(()=>{ $("p").css("display", "block"); }); </script> </body> </html> Output:
Using the show() method
The show() method is a shorthand way of setting the display property to block. It’s specifically designed for making elements visible.
Syntax:
$('element_selector').show();Example: The below example will illustrate the use of the show() method to add the style=”display: block” to an element using jQuery.
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”`to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> How to add `style=display:“block”`to an element using jQuery? </h2> <div> <p style="display: none"> It is displayed using the style="display: block" property added using css() method. </p> <button>click to display</button> </div> <script> $('button').click(()=>{ $("p").show(); }); </script> </body> </html> Output:
Using the attr() method
The attr() method can be used to set any attribute on an HTML element, including inline styles.
Syntax:
$('element_selector').attr('attribute', 'value'); Example: The below example will illustrate the use of the attr() method to add the style=”display: block” to an element using jQuery.
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”`to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> How to add `style=display:“block”`to an element using jQuery? </h2> <div> <p style="display: none"> It is displayed using the style="display: block" property added using css() method. </p> <button>click to display</button> </div> <script> $('button').click(()=>{ $("p").attr('style', 'display: block'); }); </script> </body> </html> Output:
Using the prop() method
The prop() method used to set the style=”display: block” by passing the parameters in the same way as we did in the last example with the attr() method.
Syntax:
$('element_selector').prop('property', 'value'); Example: The below example will illustrate the use of the prop() method to add the style=”display: block” to an element using jQuery.
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> How to add `style=display:“block”`to an element using jQuery? </title> <style> p { color: green; font-weight: bold; cursor: pointer; } </style> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> How to add `style=display:“block”`to an element using jQuery? </h2> <div> <p style="display: none"> It is displayed using the style="display: block" property added using css() method. </p> <button>click to display</button> </div> <script> $('button').click(()=>{ $("p").prop('style', 'display: block'); }); </script> </body> </html> Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to add CSS properties to an element dynamically using jQuery ?
In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to
1 min read
How to apply styles on an element using jQuery ?
In this article, we will learn how one can apply a style on an element using jQuery. Suppose you are building a website or game where you need the user interface to be interactive. In such cases styles can play a huge role there in this post we are going to learn how can we change styles when certai
3 min read
How to add and remove CSS classes to an element using jQuery ?
In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas
2 min read
How to apply css property to a child element using JQuery?
The task is to apply CSS property to a child element using jQuery. To do that, first we select the child element with the help of children() method in jQuery and then apply CSS property to it with the help of css() method in jQuery. Syntax: // Note : children method selects the direct child to paren
2 min read
How to add options to a select element using jQuery?
We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below: Table of Content By passing the HTML of the option tag to the
4 min read
How to set background color for an elements using jQuery ?
In this article, we will set the background color for an element using jQuery. To add the background color, we use css() method. The css() method in JQuery is used to change style property of the selected element. The css() in JQuery can be used in different ways. The css() method can be used to che
1 min read
How to add a class to the last paragraph element using jQuery ?
In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s
1 min read
How to get styles of a clicked division using jQuery ?
In this article, we will learn how to get the styles (width, height, text color, and background color) of a clicked division using jQuery. Approach: The css() method is used to get the CSS property values of the selected element in jQuery. We use the css() method in jQuery that takes an array of nam
2 min read
How to Display Element on Hover using CSS ?
In web development, displaying an element on hover is a common interaction pattern used to reveal additional content or actions. Below are the various CSS approaches to achieve this effect: Table of Content Using the display propertyUsing the visibility propertyUsing the display propertyThis approac
2 min read
How to click a button to animate the paragraph element using jQuery ?
In this article, we will click a button to animate the paragraph element using jQuery. To animate the paragraph elements, we use animate() method. The animate() method is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the ani
1 min read