How to add `style=display:“block”` to an element using jQuery?
The task is to add style=display: “block” to an element with the help of jQuery.
- There are multiple function or method to do this work, these are as follows:
- .css(): Set one or more CSS properties for the set of matched elements.
Syntax:$("div").css("display", "block") - .show(): Display the matched elements and is roughly equivalent to calling .css(“display”, “block”).
Syntax:$("div").show() - .attr(): Set one or more attributes for the set of matched elements.
Syntax:
$("div").attr("style", "display:block")
Example 1: Using .css() Method
<!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> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .css()</h2> <div> How to add <p>`style=display:“block”` </p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("p").css("display", "block"); </script> </body> </html> |
chevron_right
filter_none
Output:
Example 2: Using .attr() Method
<!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> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .attr()</h2> <div> How to add <p>`style=display:“block”`</p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("p").attr("style", "display:block") </script> </body> </html> |
chevron_right
filter_none
Output:
Example 3: Using .show() Method
<!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> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2> Using .show()</h2> <div> How to add <p>`style=display:“block”`</p> to an element using jQuery? </div> <script> var words = $("p").first().text().split(/\s+/); var text = words.join("</span> <span>"); $("div").show(); </script> </body> </html> |
chevron_right
filter_none
Output:
