[JS] 자바스크립트로 HTML 속성 및 스타일 다루기

HTML 속성 다루기

• element.hasAttribute('속성')
  : 속성이 존재하는지 확인합니다.
• element.getAttribute('속성')
  : 속성값을 반환합니다. 속성값이 없다면 null을 반환합니다.
• element.setAttribute('속성', '값')
  : 속성을 추가합니다. 속성이 존재한다면 기존 값을 새로 추가하는 값으로 수정합니다.
• element.removeAttribute('속성')
  : 속성을 삭제합니다.

HTML 비표준 속성 다루기

비표준 속성을 다룰 때는 dataset 프로퍼티( data-* 속성)을 사용합니다.

<div class="content" data-status="완료">dataset test</div>

const content = document.querySelector('.content');

console.log(content.dataset.status) // data-* 속성에 맞게 dataset.*로 사용

 

스타일 다루기

• 스타일 프로퍼티 활용
  : element.style.styleName = 'Value' 형식으로 사용합니다.
  • styleName 부분은 camelCase(단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기)를 적용합니다.
    

    const content = document.querySelector('.content');
    
    content.style.backgroundColor = '#000' // camelCase 사용

• class를 활용한 스타일 적용
  : 요소에 클래스를 추가, 수정 또는 삭제해 클래스에 지정된 스타일을 적용하는 방법입니다.

클래스 다루기

• element.classList.add('클래스')
  : 요소에 클래스를 추가합니다. 여러 개의 클래스 값을 전달하면 여러 클래스를 한 번에 추가할 수 있습니다.
• element.classList.remove('클래스')
  : 요소에서 클래스를 삭제합니다. 여러 개의 클래스 값을 전달하면 여러 클래스를 한 번에 삭제할 수 있습니다.
• element.classList.toggle('클래스')
  : 요소에 클래스가 없으면 추가하고, 있으면 삭제합니다. 하나의 클래스만 전달할 수 있습니다.