[jquery] 문서 객체 스타일 검사,추가-css()
개발 Programming/JQUERY2018. 8. 29. 15:36
css() 스타일과 관련된 모든 기능을 수행함
-스타일 속성 검사
<html>
<head>
<style>
.first{color:red}
.second{color:pink}
.third{color:orange}
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
var css = $('.first').css('color');
alert(css);
});
</script>
</head>
<body>
<h3 class='first'>header-0</h3>
<h3 class='second'>header-1</h3>
<h3 class='third'>header-2</h3>
</body>
</html>
-스타일 속성 추가
$(selector).css(name,value);
$(selector).css(name,function(index,style){});
$(selector).css(object);
attr()과 사용방식 비슷함
<html>
<head>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$(document).ready(function(){
//1 번 방식 전체 변경
//$('h3').css('color','Red');
//2 번 방식 선택자로 선택한 문서 객체에 개별적으로 스타일 속성 적용
var color = ['Red','Blue','Yellow'];
/*$('h3').css('color',function(index){
return color[index];
});*/
//3번 한꺼번에
$('h3').css({
color:function(index){
return color[index];
},
backgroundColor:'Gray'
})
});
</script>
</head>
<body>
<h3>header-0</h3>
<h3>header-1</h3>
<h3>header-2</h3>
</body>
</html>
'개발 Programming > JQUERY' 카테고리의 다른 글
| [jquery] 문서 객체 간단 생성,삽입,이동,복사 복제-$(), append().appendTo() (0) | 2018.08.30 |
|---|---|
| [jquery] 문서 객체 내부 검사,추가,삭제-innserHTML 관련 html(),text(),remove(),empty() (0) | 2018.08.29 |
| [jquery] 문서 객체 속성 제거-removeAttr() (0) | 2018.08.28 |
| [jquery] 문서 객체의 속성 추가 -attr() (0) | 2018.08.28 |
| [juqery] 문서 객체의 속성 검사 값 가져오기-attr() (0) | 2018.08.28 |
댓글()