토글클래스 이벤트 실행 시 innerHTML도 toggle이 될까?

제이쿼리에서는 toggleClass 로 클래스를 추가했다가 삭제했다가를 할 수 있다

(혹은 addClass, removeClass 반복)

 

순수 자바스크립트에서는 classList라는 프로퍼티를 활용해 클래스를 조절할 수 있다.

 

el.classList.add("클래스명")    //클래스 추가

el.classList.remove("클래스명")    //클래스 제거

el.classList.toggle("클래스명")    //클래스 넣었다뺐다

el.classList.contains("클래스명")    //클래스 존재유무 확인

 

메서드 종류는 이렇게 있다.

 

그렇다면 자바스크립트에서 클래스를 넣었다 뺐다 함으로써 HTML 요소들의 스타일링을 왔다리갔다리 할 수 있을까?

 

예제로 다중의 div들에 addEventListener로 click 이벤트를 줬다. 한 div를 클릭하면 클릭당한 div에 클래스 active가 생기고, 나머지 div들은 active 클래스가 사라지게 했다.

    var div = document.querySelectorAll('div');

    div.forEach(function(el){

        el.addEventListener('click', function(){

            div.forEach(function(del){

                del.classList.remove('active');

            });

            el.classList.add('active');

            if(el.classList.contains('active'){

                el.style = "background-color: black";

                el.el.textContent = "Hello!";

            }
        })
    })

 

클릭시 클래스 active의 스타일은 잘 먹혔다. 하지만 다른 div를 눌러 active가 클래스에서 사라져도 스타일은 원래대로 돌아오지 않았다.

 

콘솔창에서 확인해보니 active의 스타일이 인라인으로 스타일이 들어간다. 자바스크립트에서의 명령은 CSS 등에 따로 들어가는 것이 아니라 HTML에 직접 입력 되므로 그렇다.

 

HTML 스타일 적용시 우선순위를 따져보면,

인라인 스타일 > HTML내부 스타일 > 외부 스타일 > 브라우저 기본값 순인데 (이외에도 아이디 값, 클래스 값, 지정 범위에 따라 우선 순위가 변동한다)

 

인라인 스타일이 최우선이다. 따라서 CSS를 통해 스타일을 변경해봤자, 이미 먹힌 인라인 스타일은 자바스크립트로 따로 제거하지 않는한, 사라지지 않는다 ( css에서 !important를 넣어 강제로 스타일을 지정하는 방법도 있긴 하다..)

 

그래서 보통은 클래스명을 토글 이벤트를 줘서 스타일을 계속 변경하고 싶을 때는, 직접 자바스크립트에 스타일을 지정하지 않고 css에 

 

div{background-color: red}

div.active{background-color: black}

 

이런식으로 저장하면 배경화면 색상이 빨강-블랙 왔다리 갔다리가 가능해진다.

 

그렇다면 innerHTML처럼 요소 내부 텍스트를 수정하고 싶을땐 어떡할까?

이때는 별수없이 자바스크립트로 넣고 빼고 해야하는데, 그러면 else일때의 조건문을 추가하면 된다.

 

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Hello") {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}

하지만 처음 제시한 다중의 div내에서 토글 이벤트로 텍스트 변경은 너무 복잡하다. (간단한 방법이 있다면 알려주세요..)

하나의 요소 혹은 2개를 왔다갔다 반복하게 되는 경우라면 모를까..