일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- AnimationController
- 함수
- 마우이
- listview
- 오류
- 파이어베이스
- 바인딩
- GitHub
- typescript
- page
- JavaScript
- Binding
- 닷넷
- HTML
- MS-SQL
- spring boot
- Animation
- 자바스크립트
- Firebase
- 깃허브
- 애니메이션
- React JS
- .NET
- MVVM
- 플러터
- Maui
- db
- 리엑트
- MSSQL
- Flutter
Archives
- Today
- Total
개발노트
9. [Javascript] JS로 Class 속성 추가, 제거하기 (with classList) 본문
반응형
요소의 클래스를 추가하거나 제거하기 위해 classList 속성을 사용할 수 있습니다.
classList는 클래스를 조작하는 여러 메서드를 제공합니다.
1. 클래스 추가하기
- classList.add() 메서드를 사용하여 요소에 클래스를 추가할 수 있습니다.
// 요소 선택
var element = document.getElementById('myElement');
// 클래스 추가
element.classList.add('myClass');
위의 코드에서 add() 메서드를 사용하여 myElement 요소에 myClass 클래스를 추가합니다.
2. 클래스 제거하기
- classList.remove() 메서드를 사용하여 요소에서 클래스를 제거할 수 있습니다.
// 요소 선택
var element = document.getElementById('myElement');
// 클래스 제거
element.classList.remove('myClass');
위의 코드에서 remove() 메서드를 사용하여 myElement 요소에서 myClass 클래스를 제거합니다.
3. 클래스 토글하기
- classList.toggle() 메서드를 사용하여 요소에 클래스를 토글(추가 또는 제거)할 수 있습니다.
- 해당 클래스가 존재하는 경우에는 제거되고, 존재하지 않는 경우에는 추가됩니다.
// 요소 선택
var element = document.getElementById('myElement');
// 클래스 토글
element.classList.toggle('myClass');
위의 코드에서 toggle() 메서드를 사용하여 myElement 요소의 myClass 클래스를 토글합니다.
Javascript의 classList 사용하여 CSS의 Class 추가, 삭제를 통해 스타일의 변화를 줄 수 있습니다.
반응형
'웹 개발 > Javascript' 카테고리의 다른 글
11. [Javascript] forEach 메서드 (Array용 for문) (0) | 2023.05.23 |
---|---|
10. [Javascript] 이벤트 기본 동작 막기 (with preventDefault) (0) | 2023.05.23 |
8. [Javascript] JS로 HTML 요소 만들기 (with createElement, appendChild) (0) | 2023.05.23 |
7. [Javascript] localStorage를 이용한 로컬 DB 활용하기 (0) | 2023.05.23 |
6. [Javascript] 일정 시간간격으로 함수 호출하기(with setInterval, setTimeout) (0) | 2023.05.23 |
Comments