Tutorial

Sign Up

log In

JQuery
jQuery css()

❮ Previous

Next ❯

jQuery css() Method

The .css() method is used to get or set one or more CSS properties of selected elements.


jQuery .css() method is one of the most powerful and convenient tools for manipulating styles directly with JavaScript


Return a CSS Property

To return (get) a CSS property value using jQuery’s .css() method, use the following syntax:


$(selector).css("property-name");


he following example will return the color value of the div element:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("div").css("background-color"));
});
});
</script>

Try it yourself

To set a CSS property in jQuery, you use the .css() method and provide the property name and value as arguments.


Syntax:


$(selector).css("property-name", "value");


The following example will set the background-color value for selected elements:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").css("background-color", "yellow");
});
});
</script>

Try it yourself

Set Multiple CSS Properties


jQuery makes it super easy to set multiple CSS properties at once using the .css() method with an object.


Syntax:


css({"propertyname":"value","propertyname":"value",...});


The following example will set a background-color and a font-size for selected elements:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").css({
"background-color": "black",
"color": "white",
"padding": "20px",
"border-radius": "10px"
});
});
});
</script>

Try it yourself

Note

Use camelCase for properties if you prefer (e.g., fontSize instead of font-size) — both work:


❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.