From jQuery JavaScript Library
« Back to CSS
css( name )
Return a style property on the first matched element.
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.
Arguments:| name | String | |
|---|
| The name of the property to access. |
Examples:| Name | Type |
|---|
To access the background color of a clicked div.
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>
css( properties )
Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements.
Be aware, however, that when the key contains a hyphen, such as "background-color," it must either be placed within quotation marks or be written in camel case like so: backgroundColor. As "float" and "class" are reserved words in JavaScript, it's recommended to always surround those terms with quotes. jQuery normalizes the "opacity" property in Internet Explorer.
Arguments:| properties | Map | |
|---|
| Key/value pairs to set as style properties. |
Examples:| Name | Type |
|---|
To set the color of all paragraphs to red and background to blue:
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
});
</script>
<style>
p { color:green; }
</style>
</head>
<body>
<p>
Move the mouse over a paragraph.
</p>
<p>
Like this one or the one above.
</p>
</body>
</html>
If the property name includes a "-", put it between quotation marks:
$("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function () {
$(this).css({ "background-color":"yellow", "font-weight":"bolder" });
}, function () {
var cssObj = {
"background-color": "#ddd",
"font-weight": "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
});
</script>
<style>
p { color:green; }
</style>
</head>
<body>
<p>
Move the mouse over a paragraph.
</p>
<p>
Like this one or the one above.
</p>
</body>
</html>
css( name, value )
Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value.
Arguments:| name | String | |
|---|
| The name of the property to set. |
| value | String, Number | |
|---|
| The value to set the property to. |
Examples:| Name | Type |
|---|
To change the color of any paragraph to red on mouseover event.
$("p").mouseover(function () {
$(this).css("color","red");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});
</script>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
</head>
<body>
<p>
Just roll the mouse over me.
</p>
<p>
Or me to see a color change.
</p>
</body>
</html>
To highlight a clicked word in the paragraph.
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});
});
</script>
<style>
p { color:blue; font-weight:bold; cursor:pointer; }
</style>
</head>
<body>
<p>
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
</p>
</body>
</html>
