From jQuery JavaScript Library
« Back to CSS
css( name )
Return a style property on the first matched element.
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="../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.
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({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
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="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function () {
$(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
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="../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 or 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="../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="../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>