Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 개발자 회고록
- 연습문제
- toCharArray
- 스프링 컨테이너
- 월간코드챌린지
- 코테
- GoingBus
- 카카오
- JavaScript
- Memoir
- 명령어
- 프로그래머스
- Java
- 리눅스마스터 3과목
- 자바
- Kotlin
- 반복문
- 백준 javascript
- 고잉버스
- 리눅스
- 리눅스마스터1급
- 코딩테스트
- Linux
- 리눅스마스터 1급 정리
- java 백준 1차원 배열
- 백준 java
- 자바스크립트 코딩의 기술
- 문자열
- map
- 스프링 빈
Archives
- Today
- Total
hoon's bLog
jQuery class 클래스 속성 설정 및 클래스 메서드 본문
반응형
클래스 설정
- HTML 요소의 class 속성은 여러 개의 class 값을 가짐
- class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 가능
클래스 설정관련 메서드 설명
- .addClass() : 선택한 요소에 인수로 전달받은 클래스를 추가함.
- .removeClass() : 선택한 요소에서 인수로 전달받은 클래스를 제거함.
- .toggleClass() : 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함.
- .hasClass() : 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함.
$(function() { $("#addBtn").on("click", function() { // id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가함. $("#first, #third").addClass("lined"); }); $("#removeBtn").on("click", function() { // id가 "first"와 "third"인 요소가 "lined"라는 클래스에 포함되면 해당 클래스를 제거함. $("#first, #third").removeClass("lined"); }); });
- 단순히 클래스만을 추가하는 것이 아니라 클래스에 미리 스타일을 설정하여, 해당 클래스에 속한 모든 요소에 한꺼번에 적용하는 것!
- 또한, .toggleClass() 메서드를 이용하여 클래스의 추가와 제거를 번갈아 시행도 가능
- 다음 예제는 .toggleClass() 메서드를 이용하여 위의 예제를 더욱 간결하게 만든 예제
$(function() {
$("button").on("click", function() {
// id가 "first"와 "third"인 요소에 "lined"라는 클래스를 추가하고, 다시 한 번 클릭하면 제거함.
$("#first, #third").toggleClass("lined");
});
});
$(function() {
$("button").on("click", function() {
// id가 "target"인 요소가 "lined"라는 클래스에 포함되면 true를, 포함되지 않으면 false를 반환함.
var result = $("#target").hasClass("lined");
$("#text").html(result);
});
});
Reference
https://www.tcpschool.com/jquery/jq_style_class
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
jQuery event delegation propagation 이벤트 위임 전파 버블링 (0) | 2023.07.17 |
---|---|
jQuery event handler object 이벤트 개념 및 처리 (1) | 2023.07.14 |
jQuery attr prop, 속성 프로퍼티 설정 (1) | 2023.07.13 |
jQuery element area 요소의 영역 (2) | 2023.07.12 |
jQuery DOM method 기타 탐색 메서드, 필터링(filtering) 메서드 (0) | 2023.07.11 |