WEB(웹)/jQuery
문서 객체의 스타일
SharingWorld
2018. 6. 30. 13:10
문서 객체의 스타일
문서 객체의 스타일 검사
css()
: 스타일과 관련된 모든 기능을 수행합니다.
css() 메서드로 특정 문서 객체의 스타일 속성을 알고 싶을 때 -> 메서드의 매개변수에 스타일 속성 이름을 입력한다.
$(document).ready(function() {
// 변수를 선언합니다.
var color = $('h1').css('color');
// 출력합니다.
alert(color); // rgb(255, 0, 0) 같은 값이 나온다.
});
문서 객체의 스타일 추가
세가지 형태
1. $(selector).css(name, value);
2. $(selector).css(name, function(index, style){});
3. $(selector).css(object);
1번 예시)
$(document).ready(function() {
$('h1').css('color', 'red');
});
2번 예시)
$(document).ready(function() {
// 변수를 선언합니다.
var color = ['red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$('h1').css('color', function(index) {
return color[index];
});
});
3번 예시)
$(document).ready(function() {
// 변수를 선언합니다.
var color = ['red', 'white', 'purple'];
// 문서 객체의 스타일을 변경합니다.
$('h1').css({
color: function(index){
return color[index];
},
backgroundColor: 'black'
});
});