How to add `style=display:“block”` to an element using jQuery?

03 Aug, 2021
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")
.css(): Set one or more CSS properties for the set of matched elements.Syntax:$("div").css("display", "block")
$("div").css("display", "block")
.show(): Display the matched elements and is roughly equivalent to calling .css(“display”, “block”).Syntax:$("div").show()
$("div").show()
.attr(): Set one or more attributes for the set of matched elements.Syntax:$("div").attr("style", "display:block")
$("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 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>        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>
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 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 .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>
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 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 .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>
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.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.