-
14. JQuery 생성된 요소에 클래스 추가/삭제 하기JQuery 2022. 9. 1. 16:24
원하는 요소에 미리 작성했던 클래스를 addClass / removeClass / toggleClass 를 통해 추가 및 삭제할 수 있다.
비교적 복잡한 스타일을 작성하거나 javascript의 코드가 길어질 경우 사용하는 것이 좋다.
$(셀렉터).addClass( “class name” ) 선택한 요소에 해당 클래스 추가 $(셀렉터).removeClass( “class name” ) 선택한 요소에 해당 클래스 삭제 $(셀렉터).toggleClass( “class name” ) 선택한 요소에 해당 클래스 추가/삭제
(스위치처럼 클래스가 이미 있다면 삭제, 클래스가 없다면 추가한다.)* 태그에 클래스를 추가/삭제하는 예시
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>문서 제목</title><style>.ex {width: 200px;height: 200px;background-color: yellow;text-align: center;}</style></head>
<body><button id="add">클래스 추가</button><button id="remove">클래스 삭제</button><button id="toggle">toggle</button><div>DIV</div></body><script>$("#add").on("click", function () {
/* 스타일이 많아질수록 javascript 영역에 코딩이 길어진다.$("div").css({"width":"200px","height":"200px","background-color":"yellow","text-align":"center"});*/
$("div").addClass("ex");});
$("#remove").on("click",function(){$("div").removeClass("ex");});
$("#toggle").on("click",function(){$("div").toggleClass("ex");//특정 클래스가 적용되어 있는지 여부var sw = $("div").hasClass("ex");console.log("hasclass : ", sw);//클릭했을 때 버튼이 on/off로 표시되도록if(sw){$("#toggle").text("off");}else{$("#toggle").text("on");}});</script>
</html>'JQuery' 카테고리의 다른 글
16. JQuery 요소를 서서히 사라지고 나타나게 하기 (Fade effect) (0) 2022.09.01 15. JQuery 요소를 사라지거나 나타나게 하기 (0) 2022.09.01 13. JQuery CSS 값 가져오기 & 변경하기 (0) 2022.09.01 12. JQuery 클릭하면 텍스트를 증가시키기 예시 - 1 (0) 2022.09.01 11. JQuery 속성 변경하기 예시 - 1 (0) 2022.09.01