JavaScript에서 CSS 클래스를 수정하는 방법

소개

이 자습서에서는 DOM 조작 프로젝트에 대한 JavaScript classList 개체를 사용하여 CSS 클래스를 수정하는 방법을 배웁니다. classList 개체를 사용하면 HTML 요소에 할당된 CSS 클래스를 조정할 수 있습니다.

전제 조건

JavaScript에 대한 일반적인 지식. JavaScript에 대해 자세히 알아보려면 JavaScript로 코딩하는 방법 시리즈를 확인하세요.
CSS에 대한 일반적인 지식. CSS에 대한 소개는 캐스케이드 및 특이성을 사용하여 CSS 스타일을 HTML에 적용하는 방법 튜토리얼을 확인하세요.

프로젝트 시작

index.html 파일을 만들고 CSS 클래스가 있는 style 태그와 id가 있는 단락 요소를 포함합니다.

[label index.html] 
<style>
  .colorText {
    color: purple;
  }

  .boldText {
    font-weight: bold;
  }

  .bigText {
    font-size: 35px;
  }
</style>

<p id="myText">
  Hello World! 
</p>

이제 classList 속성으로 텍스트를 수정하고 CSS 클래스를 적용해 보겠습니다.

.add() 및 .contains() classList 메서드 사용

index.js 파일을 만들고 단락 요소에 대한 참조를 가져온 다음 classList.add() 메서드를 호출합니다.

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.add('colorText');

내장된 classList.add() 메서드는 HTML 요소에 클래스를 적용합니다. 이 경우 단락 요소의 텍스트는 이제 보라색으로 나타납니다.

부울을 반환하는 classList.contains() 메서드를 사용하여 단락 요소에 CSS 클래스가 있는지 확인할 수도 있습니다.

[label index.js] 
const myText = document.getElementById('myText');

console.log(myText.classList.contains('colorText')); // true

CSS 클래스 colorText가 단락 요소에 존재하므로 호출은 true를 반환합니다.

.item() 및 .remove() classList 메서드 적용

index.js 파일에서 단락 요소에 더 많은 CSS 클래스를 추가합니다.

const myText = document.getElementById('myText');

myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];

classList 속성은 각 추가 클래스를 배열에 저장합니다. myText.classList를 콘솔 아웃하면 CSS 클래스가 포함된 배열이 출력됩니다.

배열에 있는 각 CSS 클래스의 지정된 인덱스를 확인하려면 classList.item() 메서드를 호출합니다.

const myText = document.getElementById('myText');

myText.classList.item('boldText'); // 2

CSS 클래스를 제거하려면 classList.remove() 메서드를 사용하세요.

[label index.js] 
const myText = document.getElementById('myText');

myText.classList.remove('bigText');
console.log(myText.classList); // ['colorText', 'boldText'];

myText.classList를 제거하면 제거한 CSS 클래스가 배열에 나타나지 않으며 단락 요소에 적용되지 않습니다.

이제 CSS 클래스를 추가, 확인 및 제거할 수 있으므로 다른 classList 메서드를 증폭하는 방법을 살펴보겠습니다.

classList .toggle() 메서드 처리

classList.add()와 classList.remove()를 동시에 호출하는 대신 classList.toggle() 메서드를 활용할 수 있습니다.

이렇게 하려면 index.js 파일의 버튼에 이벤트 리스너를 구현하세요.

[label index.js] 
textButton.addEventListener('click', () => {
  myText.classList.toggle('newFont');
});

클릭할 때마다 classList.toggle()은 CSS 클래스가 classList 배열에 없으면 추가하고 true를 반환합니다. CSS 클래스가 존재하는 경우 메서드는 클래스를 제거하고 false를 반환합니다.

[label index.js] 
const anotherClass = myText.classList.toggle('newSize');

console.log(anotherClass); // true --> class was added

classList.toggle() 메서드에서 선택적 두 번째 인수로 부울을 추가할 수도 있습니다. 두 번째 인수가 평가되는 방식에 따라 CSS 클래스를 추가하거나 제거합니다.

const bool = false; 

let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' already exists and will remove from classList array

let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' does not exist and will add the class

classList.toggle() 메서드는 CSS 클래스가 더 짧은 코드 줄로 배열에 존재하는지 여부에 관계없이 추가 및 제거를 지원합니다.

결론

classList 속성을 사용하면 JavaScript 내에서 HTML 요소와 해당 CSS 클래스를 변경할 수 있는 성능과 기능이 향상됩니다.

추가 정보는 DOM 이해 — 문서 개체 모델 기사를 확인하십시오.