JQuery
13. JQuery CSS 값 가져오기 & 변경하기
황민준
2022. 9. 1. 09:48
.css() 를 통하여 요소의 css 값을 가져오거나 변경할 수 있다.
비교적 단순한 스타일 적용에 활용하고 특정 스타일을 확인 하거나 변경 할 경우 사용 한다.
오브젝트 {} 를 활용하여 여러 개의 css를 한 번에 적용할 수도 있고 .css 를 여러 번 나열하여 사용할 수도 있다.
| $(셀렉터).css( “attribute” ); | 선택한 요소의 스타일 값을 받아 온다. |
| $(셀렉터).css( “attribute”,”value” ); | 선택한 요소의 스타일 값을 변경 한다. |
* .css()를 활용하여 값을 가져오고 변경하기 예시
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
<style>
</style>
</head>
<body>
<p id="ex1" style="color: blue; font-size: 32px;">스타일이 적용된 텍스트</p>
<p id="ex2">스타일이 적용되지 않은 텍스트</p>
<div>
font size : <span id="size"></span><br>
font color : <span id="color"></span><br>
<button>CSS 적용</button>
</div>
</body>
<script>
var color = $("#ex1").css("color");
var size = $("#ex1").css("font-size");
$("#size").html(size);
$("#color").html(color);
//css의 특정 속성에 값을 변경
$("button").click(function(){
/* 한 번에 하나의 속성을 넣을 때
$("#ex2").css("color",color);
$("#ex2").css("font-size",size);
*/
//한 번에 여러 속성을 넣을 때
$("#ex2").css({
"color":color,
"font-size":size
});
});
</script>
</html>