라이브러리
[JAVASCRIPT] element.classList.add(className) - 클래스 추가
JavaScript에서 element.classList.add(className) 소개
`element.classList.add(className)`은 HTML 요소(element)의 클래스 목록에 새로운 클래스를 추가하는 메서드입니다. 이 메서드는 `classList` 속성을 사용하여 클래스 목록을 관리하며, 클래스를 추가, 삭제, 또는 교체할 수 있습니다.
element.classList.add(className) 사용법
`element.classList.add(className)` 메서드는 다음과 같은 형식으로 사용됩니다.
#hostingforum.kr
javascript
element.classList.add(className);
* `element`: HTML 요소(element)
* `className`: 추가할 클래스 이름
예제
#hostingforum.kr
html
Hello World!
#hostingforum.kr
javascript
// JavaScript 코드
const myDiv = document.getElementById('myDiv');
// 클래스 목록에 'active' 클래스 추가
myDiv.classList.add('active');
// 결과: Hello World!
추가 예제: 클래스 삭제
#hostingforum.kr
javascript
// 클래스 목록에서 'container' 클래스 삭제
myDiv.classList.remove('container');
// 결과: Hello World!
추가 예제: 클래스 교체
#hostingforum.kr
javascript
// 클래스 목록에 'new-class' 클래스 추가
myDiv.classList.replace('active', 'new-class');
// 결과: Hello World!
추가 예제: 클래스 목록 확인
#hostingforum.kr
javascript
// 클래스 목록 확인
console.log(myDiv.classList); // ['new-class']
// 클래스 목록에 'old-class' 클래스 추가
myDiv.classList.add('old-class');
// 클래스 목록 확인
console.log(myDiv.classList); // ['new-class', 'old-class']
요약
`element.classList.add(className)` 메서드는 HTML 요소(element)의 클래스 목록에 새로운 클래스를 추가하는 데 사용됩니다. 이 메서드는 클래스를 추가, 삭제, 또는 교체할 수 있습니다. 예제를 통해 클래스 목록 관리의 다양한 방법을 살펴보았습니다.
댓글목록
등록된 댓글이 없습니다.
