-
13. JQuery CSS 값 가져오기 & 변경하기JQuery 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>'JQuery' 카테고리의 다른 글
15. JQuery 요소를 사라지거나 나타나게 하기 (0) 2022.09.01 14. JQuery 생성된 요소에 클래스 추가/삭제 하기 (0) 2022.09.01 12. JQuery 클릭하면 텍스트를 증가시키기 예시 - 1 (0) 2022.09.01 11. JQuery 속성 변경하기 예시 - 1 (0) 2022.09.01 10. JQuery 속성 변경하기 (0) 2022.08.30