CSS in Javascript

title을 한 번 클릭하면 title의 색이 blue가 되고, 또 한 번 클릭하면 tomato색이 되고

즉, title의 색이 blue가 됐을 때 클릭하면 tomato가 되고 다시 클릭하면 blue가 되도록 만들고 싶다.

 

일단 코드를 아래와 같이 변경했다.

console.log(h1.style.color); 를 추가함

이 화면을 실행하여 console창을 확인하면 처음에는 아무 것도 출력되지 않고 두 번째 부터는 클릭할 때마다 blue가 출력되는 것을 확인할 수 있다.

 

이러한 검사를 이용하여 h1.style.color가 blue라면 그것을 tomato로 변경해주고, h1.style.color가 blue가 아니라면 그것을 blue로 변경하도록 코드를 작성하면 된다는 결론을 얻었다.

이때 === 는 값이 일치함을 확인하기 위함이다.

이렇게 코드를 수정하고 다시 실행해보면 클릭할때마다 title의 색이 바뀌는 것을 확인할 수 있다.

첫 번째 클릭

두 번째 클릭

하지만 우리는 코드를 개선하여 더 깔끔하게 만들 수 있는데,

그것은 h1.style.color를 위의 코드처럼 여러번 호출하지 않고 color의 현재 상태를 저장하여 사용하는 것이다.

 

아래와 같이 상수 currentColor에 h1.style.color를 할당해주고, 빈 변수 newColor를 생성했다.

그리고 currentColor가 blue이면 newColor를 tomato로 변경하고, 그렇지 않으면 newColor를 blue로 변경해주는 if-else문을 작성했다. 

여기까지만 작성하면 title의 색상이 변경되지 않기 때문에 if-else문을 종료한 뒤에 h1.style.color = newColor라는 코드를 추가했다.

즉, 현재 색상이 blue가 아니면 newColor에 tomato가 할당된 다음 조건문이 종료되고, 다시 h1.style.color에 newColor인 tomato가 할당되어 title의 색상이 변경되는 것이다.