articles

Home / DeveloperSection / Articles / JQuery css method

JQuery css method

Sachindra Singh6961 22-Feb-2011

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

             


Updated 07-Sep-2019

Leave Comment

Comments

Liked By