[Javascript] 다양한 방법으로 스타일 적용하기

HTMLElement.style

const ele = document.querySelector('.ele');
ele.style.display = 'flex';

/* 스타일 속성 해제(삭제)하기 */
ele.style.display = '';

<div class="ele" style="display: flex;"></div>

 

HTMLElement.style.cssText

const ele = document.querySelector('.ele');
ele.style.cssText = `display: flex;	
  justify-content: center;
  align-items: center;
`;

 

HTMLElement.classList.add('className')

<div class="ele"></div>

const ele = document.querySelector('.ele');
ele.classList.add('active');

/* 클래스 여러개 추가 */
ele.classList.add('active', 'on');

<div class="ele active"></div>

<!-- 클래스 여러개 추가한 DOM -->
<div class="ele active on"></div>

 

HTMLElement.classList.remove('className')

<div class="ele active"></div>

const ele = document.querySelector('.ele');
ele.classList.remove('active');

<div class="ele"></div>

 

HTMLElement.classList.toggle('className')

<div class="fav"></div>

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

function onFav(e){
  e.target.classList.toggle('active'); 
}

fav.addEventListener('click', onFav);

<!-- 클릭할 때마다 토글로 active 클래스 추가/삭제됨 --> 
<div class="fav active"></div>

 

Element.setAttribute('class', 'className')

<div class="ele"></div>

const ele = document.querySelector('.ele');
ele.setAttribute('class', 'active');

<!-- 기존 클래스를 덮어버림 -->
<div class="active"></div>

 

Element.removeAttribute('className')

<div class="ele active"></div>

const ele = document.querySelector('.ele');
ele.removeAttribute('class');

<!-- 클래스 속성 자체가 삭제됨 -->
<div></div>