How to use css() Method in JQuery

In this article, I will explain How to set css property in JQuery.
  • 1320

JQuery css() Method

  • css() method sets or returns one or more style properties for the selected elements.

jQuery css(name) Method

  • css(name) method use to fetch or return to the properties value.
  • css(name) metthod use to set CSS property value.

Sysntax

$(selector).css(name);
  • name This parameter can contain any CSS property Like "background color"

Example

The following example shows how to css(name) method in jquery.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert($("p").css("color"));
});
});
</script>
</head>
<body>
<p style="color:blue">This is a css(name) method example</p>
<button>Return color value of element</button>
</body>
</html>

Output

 css name.jpg

jQuery css(name,value) Method

  • css(name,value) method sets the single style property for ALL matched elements.
  • css(name,value) method use to set the proper properties values.

Sysntax

$(selector).css(name,value);
  • name: The name of the property to be set.
  • value: The value of the property.

Example

The following example shows how to css(name,value) method in jquery.

<!DOCTYPE html>

<html>

<head>

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

<script type="text/javascript">

    $(document).ready(function () {

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

            $("p").css("color", "blue");

        });

    });

</script>

</head>

<body>

<p>First paragraph.</p>

<p>Second paragraph.</p>

<button style="border-left-style:solid">Click for Set the color property of all paragraph </button>

</body>

</html>

Output

 css property.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2013 dotNetheaven. All rights reserved.