jQuery .css() gets and sets css style
Syntax and Description for .css() getter
.css() gets and sets CSS-related properties of elements.
.css(propertyName) (getter)
gets the value of a style property for the first element in the set of matched elements.
propertyName is a CSS property.
Its return value is a string containing the CSS property value.
Syntax and Description for .css() setter
.css(propertyName, value) (setter)
Set one or more CSS properties for the set of matched elements.
propertyName: A CSS property name. value: A value to set for the property.css(map)map: A map of property-value pairs to set
.css(propertyName, function)
propertyName: A CSS property name.function: A function returning the value to set
Its return value is the jQuery object, for chaining purposes.
Set the background color
The following code uses the .css() method to set the
background color.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j av a 2 s .co m-->
var color = $("b").css("background-color");
alert(color);
});
</script>
</head>
<body>
<body>
<b>Hello</b>
</body>
</html>
Get the background color
The following code gets background color with
.css() method and creates a new span element using that
color.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww .ja v a2 s.c om-->
var color = $("b").css("background-color");
alert(color);
$("b").html("<span style='color:" +color + ";'>" + color + "</span>.");
});
</script>
</head>
<body>
<body>
Highlight all to see me. java2s.com
<b>Hello</b>
</body>
</html>
Set background color for first table row
The following code selects first table row
with selector tr:first then sets background color
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j a va 2 s.c om-->
$("tr:first").css("background-color", "red");
});
</script>
</head>
<body>
<body>
<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>
Change the font style for last table row
The following code selects the last table row with selector
tr:last then it uses .css
function to change the font.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww . java 2 s .c om-->
$("tr:last").css("font-style", "italic");
});
</script>
</head>
<body>
<table>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>ja va2s.com</td></tr>
</table>
</body>
</html>
Change the color and value
.css() can also be used to change the color. The following code selects form input element and then sets the color to red and changes its value as well.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w . j a v a 2 s .co m-->
$("label + input").css("color", "red").val("java2s.co m")
});
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Address:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
Change the border
With .css() we can set the border.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w . j av a 2 s .co m-->
$(".myClass").css("border","3px solid red");
});
</script>
</head>
<body>
<div class="notMe">div </div>
<div class="myClass">div</div>
<span class="myClass">j av a2s.com</span>
</body>
</html>
Set two css properties
The following code sets two css properties within one command.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww. j a va 2s . c om-->
$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
});
</script>
</head>
<body>
<body>
<table>
<tr><td>First</td></tr>
<tr><td>Middle</td></tr>
<tr><td>j av a2s.com</td></tr>
</table>
</body>
</html>
Nested style setting
The following code chains style setting.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w .ja v a 2 s .c o m-->
$("div").css("background", "yellow").filter(".blue").css("border-color", "red");
});
</script>
<style>
div { border:2px white solid;}
</style>
</head>
<body>
<body>
<div class=blue>java2s.com</div>
<div>ja v a2s.com</div>
<div>java 2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
<div>java2s.com</div>
</body>
</html>
CSS in array
The following code shows how to sets CSS in an array. It
creates an array of style properties and values and then sets
them together with .css method.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w .j a v a2 s . c o m-->
$("b").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'red'
}
$(this).css(cssObj);
});
});
</script>
</head>
<body>
<body>
<b>java2s.co m</b>
</body>
</html>
Set background color with rgb format
The following code uses the rgb function with .css() method.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w. j a v a 2 s. c o m-->
$("td:empty").text("Was empty").css('background', 'rgb(255,220,200)');
});
</script>
</head>
<body>
<table>
<tr><td>data</td><td>java2s.com</td></tr>
<tr><td>data</td><td></td></tr>
<tr><td>data</td><td></td></tr>
</table>
</body>
</html>