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 요소를 화면에 안보이게 감춥니다.