Javascript로 CSS 스타일 변경 방법

Javascript로 CSS 스타일 변경

클래스명으로 찾은 요소 클래스 삭제

const domList = document.getElementsByClassName('클래스명');

if (domList && domList.length > 0) {
	domList[0].classList.remove('클래스명');
}

ID로 찾은 요소 활용 방법

const dom = document.getElementById('ID명');

// 요소의 클래스 삭제
dom.classList.remove('클래스명');

// 요소의 스타일 속성 삭제
dom.style.removeProperty('삭제할CSS속성');

// 요소의 width, height 확인
dom.clientWidth;
dom.clientHeight;

display 스타일 변경

document.querySelector('.loading').setAttribute('style', 'display:flex;');
또는
document.querySelector('.loading').style.display = 'flex';

display:flex	컨테이너를 수직 정렬하여 쌓습니다.
display:inline-flex	컨테이너를 수평 정렬하여 쌓습니다.
display:none	HTML 요소를 화면에 안보이게 감춥니다.

ul 목록 li 선택 시 active 클래스 추가

const listItems = document.querySelectorAll('ul.클래스명 li');

listItems.forEach(item => {
  item.addEventListener('click', () => {
    // 기존 active 제거
    listItems.forEach(i => i.classList.remove('active'));
	
    // 클릭한 요소에 active 추가
    item.classList.add('active');
  });
});

사용자가 클릭한 li 요소에 active 클래스를 부여하는 이벤트 리스너를 추가합니다.