Home > DeveloperSection > Beginner > JQuery css method

JQuery css method


JQuery JQuery 
Ratings:
0 Comment(s)
 3582  View(s)
Rate this:

JQuery css method

In jQuery css () method is very useful. By using this method we can change style of elements. In this article I am trying to show you, how we can apply css method on web page. By using this method we can define element style, format, height or width etc. In this example <div>element contain text and I want to change font color of text by using css () method. In the page when button is clicked then css of <div> tag is changed as shown by following example

Syntax:

·         (“target”).css (“keyname”);

·         (“target”).css (“keyname”, value”);

·         (“target”).css({properties});

Code:

<head>

    <title>jQuery css method</title>

    <script type="text/javascript" src="jquery.min.js">     </script>

    <script type="text/javascript">

        $(document).ready(function()        {

            $("button").click(function()            {

                $("div").css("color","blue");//when button is clicked css will apply on <div> element

            });

 

        });

    </script>

</head>

<body>

    <div style="width:300px;height:100px;position:relative"> <!--div element contain some text-->

       &nbsp;JQuery is a library that makes it quicker and easier

        to build JavaScript webpages and web application.

    </div>

    <button>

    Blue font

    </button>

</body>

</html>

Screenshot

JQuery css method

If I will click Blue font button then it will change font color of <div> control as shown below:

Screenshot

JQuery css method

 

 

 

               


Don't want to miss updates? Please click the below button!

Follow MindStick