자바스크립트 (14) - 자바스크립트와 style

타이틀을 한번누르고 한번 더누르면 색깔을 또 다르게 바꾸고 싶다. 이떄 if else 문 사용할 수 잇음.

function handleTitleClick(){
    console.log(h1.style.color);
    h1.style.color ="blue";
    console.log(h1.style.color);
 }

getter 블록과 setter 블록이 따로 있음.

겟으로 컬러 가져와서 콘솔로그 해보고

셋 해서 블루로 바꾼 다움에 다시

콘솔로그

계속 블루블루만 함

이프문을 해서 만약 블루면 토마토로 바꿔달라고 짜봄

if(h1.style.color === "blue") {

h1.style.color = "tomato"

} else {

h1.style.color = "blue"

}

하지만 h1.style.color 을 엄청 호출하기보단 더 깔끔하게 만들 수 잇음.

function handleTitleClick(){

const currentColor = h1.style.color;

let newColor;

if(currentColor === "blue") {

newColor = "tomato";

} else {

newColor = "blue";

}

h1.style.color = newColor;

}

이렇게 하면 더 깔끔해짐.

하지만 엘리먼트를 자스에서 수정하는게 좋진 않음. 다른언어를 섞는 건 좋지 않음.

자스는 상호작용을 만들어내는데 적합하고, html은 다른 선택지가 없음.

css 는 자스에서도 할 수 있지만 그냥 css 에서 하는게 더 좋음.

step 1.

const h1 = document.querySelector("div.hello:first-child h1");

엘리먼트를 찾아라

step 2.

h1.addEventListener("click", handleTitleClick);

이벤트를 리슨해라.

step 3.

그이벤트에 반응하는 함수를 짜라.

반응하고, 보여주고, 감추고 색을 바꾸는 것임.

monsangter