CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bakhtawar
Bakhtawar

Reputation: 85

Background color through jquery

I try to put background-color in paragraph through jquery before this i create div and there is two buttons show and hide when click on show div displayed and when click on hide div is hide .. so after this when i try this background-color not visible

check this code

<head>
        <title></title>
        <meta charset="utf-8" />
        <script src="jquery-2.2.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#btnhide").click(function () {
                    $("#dvmain").hide("slow");
                });
                $("#btnshow").click(function () {
                    $("#dvmain").show("slow");
                });

            }); 

            $document.ready(function () {

                $("p").css("background-color", "red");

            });


        </script>
    </head>
    <body>
        <input type="button" id="btnshow" value="show" />
        <input type="button" id="btnhide" value="hide" />
        <div id="dvmain" style="width:100%;height:400px;background-color:red;">

        </div>

        <p>this is paragraph one</p>
        <p>this is paragraph two</p>
        <p>this is paragraph three</p>

    </body>

any solution?

Upvotes: 0

Views: 78

Answers (2)

Arokiyanathan
Arokiyanathan

Reputation: 94

<head>
        <title></title>
        <meta charset="utf-8" />
        <script src="jquery-2.2.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("p").css("background-color", "red");
                $("#btnhide").click(function () {
                    $("#dvmain").hide("slow");
                });
                $("#btnshow").click(function () {
                    $("#dvmain").show("slow");
                });

            }); 

      </script>
    </head>
    <body>
        <input type="button" id="btnshow" value="show" />
        <input type="button" id="btnhide" value="hide" />
        <div id="dvmain" style="width:100%;height:400px;background-color:red;">

        </div>

        <p>this is paragraph one</p>
        <p>this is paragraph two</p>
        <p>this is paragraph three</p>

    </body>

Upvotes: 1

user1846747
user1846747

Reputation:

Replace your script like this,

$(document).ready(function () {
   $("#btnhide").click(function () {
      $("#dvmain").hide("slow");
   });
   $("#btnshow").click(function () {
      $("#dvmain").show("slow");
   });
   $("p").css("background-color", "red");
});

And remove this part

$document.ready(function () {
    $("p").css("background-color", "red");
});

Upvotes: 1

Related Questions