css 초기화 하는 방법

.remove-all-styles {
  all: initial;
  * {
    all: unset;
  }
}

익스플로어, 사파리에서는 작동 x, all -> revert로 대체하면 사파리에선 작동

 

위 css구문을 선언하고, js로 "remove-all-styles"라는 클래스를 element에 추가해주고 삭제하면 초기화 된다

개인적으로는 해당 css element에 적용된 css구문을 지우고 싶다면 e.classList.remove('클래스 이름')을 사용하여 지우는걸 추천한다. 이 구문은 태그에 적용된 "모든 스타일"을 지우고 싶을때만 사용하면 된다.(default 스타일도 다날라감)

사용예시

    <style>
        h1 {
            text-align: center;
            font-size: 200px;
            color: blue;
        }

        .remove-all-styles {
            all: initial;
            * {
                all: unset;
            }
        }


    </style>
    <script>
        function myfunc() {
            h1 = document.getElementById("myh1");
            console.log(h1);
            h1.classList.add('remove-all-styles');
            //h1.classList.remove('some-style'); // element에 적용된 클래스를 삭제하는것도 방법
            h1.style.color = 'blue'; // 혹은 또 다른 css를 추가해줌
        }
    </script>
    <h1 id="myh1">안녕하세요</h1>
    <button onclick="myfunc()">스타일 지우고 파란글씨</button>