[JavaScript] 자바스크립트로 css 스타일 변경하기

DOM 요소의 스타일 변경

1) className

<form>
      <div class="control">
        <label for="product-name">Product Name</label>
        <input type="text" id="product-name" name="product-name" maxlength="60">
        <span id="charcount">
          <span id="remaining-chars">60</span>/60
        </span>
      </div>
      <button>Submit</button>
    </form>

input.warning {
  background-color: rgb(248, 191, 145);
}

#remaining-chars.warning {
  color:rgb(211, 109, 26);
}

const spanElement = document.getElementById('remaining-chars');

spanElement.className = 'warning';

 

element.className('some-class')로 해당 요소에 클래스명을 추가할 수 있다.

 

 

• className으로 css 클래스 추가할 때의 단점 : 이미 클래스를 가지고 있는 요소의 경우, 해당 클래스가 새로운 클래스로 덮어씌어진다. 기존 클래스와 새로운 클래스를 같이 사용하려면 someElement.className = ‘old-class new-class’처럼 기존 클래스명을 찾아 하드코딩으로 추가해주어야 한다.

 

 

2) classList

classList 프로퍼티는 다양한 메서드를 사용할 수 있는데, 이 메서드들을 통해 새로운 클래스를 추가하거나 기존 클래스를 삭제하여 className의 방법보다 더 쉽게 관리할 수 있다.

 

spanElement.classList.add('add-class') // 클래스명 추가, 기존의 클래스가 있더라도 기존 것을 덮어쓰지 않고 새롭게 추가됨
spanElement.classList // 요소의 클래스명을 확인할 수 있다.
spanElement.classList.remove('add-class') // 해당 클래스 삭제, 삭제한 클래스를 제외한 나머지 클래스는 그대로 남아있다.

 

위의 결과물

 

 

메서드

• add('class-name') : 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 요소의 class 속성에 이미 존재한다면 무시한다.
• remove('class-name') : 지정한 클래스 값을 제거한다. 존재하지 않는 클래스를 제거하려는 경우 에러를 발생시키지 않는다.
• item(index-number) : 컬렉션의 인덱스를 이용하여 클래스 값을 반환한다.
• toggle('first-class-name', 'second-class-name')
  • 하나의 인수만 있을 때는 클래스 값을 토클링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
  • 두 번째 인수가 있을 때 : 두 번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.
• contains('class-name')
  • 지정한 클래스 값이 요소의 class 속성에 존재하는지 확인한다.
• replace('old-class', 'new-class')
  • 존재하는 클래스를 새로운 클래스로 교체한다.