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:

  1. .css(): Set one or more CSS properties for the set of matched elements.
    Syntax:



    $("div").css("display", "block")
  2. .show(): Display the matched elements and is roughly equivalent to calling .css(“display”, “block”).
    Syntax:

    $("div").show()
  3. .attr(): Set one or more attributes for the set of matched elements.
    Syntax:

    $("div").attr("style", "display:block")

Example 1: Using .css() Method

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right






                        filter_none








Output:




Example 2: Using .attr() Method











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:




Example 3: Using .show() Method











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








Output:







    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
SHUBHAMSINGH10
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.