jQuery 문서 객체의 스타일
1. $(selector).css(name, value);
2. $(selector).css(name, function(index, style) { } );
3. $(selector).css(object);
<!doctype html>
<html>
<head>
<title>jquery test</title>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<style>
.first { color:red; }
.second { color:pink; }
.third { color:orange; }
</style>
</head>
<body>
<script>
$(document).ready(function () {
});
</script>
<h1 class="first">Header-0</h1>
<h1 class="second">Header-1</h1>
<h1 class="third">Header-2</h1>
</body>
</html>
응용 예제)
<script>
$(document).ready(function () {
$('h1').css('color', 'red');
});
</script>
<script>
// 변수 선언
var color = {'red', 'white', 'purple'};
// 문서 객체의 스타일을 변경한다.
$('h1').css('color', function(index) {
return color[index];
});
</script><script>
// 변수 선언
var color = {'red', 'white', 'purple'};
$('h1').css({
color: function(index) {
return color[index];
},
backgroundColor: 'black'
});
</script>본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문