하루를살자

JS - Vanilla JS Clone Project [CSS in js] 본문

JS

JS - Vanilla JS Clone Project [CSS in js]

Kai1996 2021. 12. 2. 14:35 
//아래 두개의 선택자는 같은결과를 줌
const title2 = document.querySelector("div .title");

//Event handler 
function handleTitleEnter(){
    const titleColor = title2.style.color;
    let newColor;

    if (titleColor === "green"){
        newColor = "tomato";
    }else{
        newColor = "green";
    }

    title2.style.color = newColor;

}


//Call the event upon the user's behavior
title2.addEventListener("mouseenter" , handleTitleEnter);

"handleTitleEnter()" 이벤트를 보면 const 변수타입의 titleColor 와 let 타입의 newColor 라고 지정해주었는데, 현재 값을 저장해주는 변수와, 새롭게 바뀔 값을 저장해주는 변수를 미리 정해주어, 핸들러 끝 에 요소 자체에 newColor 를 지정해주었다.

*newColor 는 let 타입 이기 때문에, 초기 값 설정을 안 해 주어도 됨.

 

*이런 식으로 변수를 생각해보고 타입을 지정하여 코드를 짜는 방법이 아주 중요하기 때문에 계속 연습 해야 됨. 

 

*자바스크립트 파일 에서 CSS 를 변화 시켜 줄수 있지만, 나중에 코드 를 다시 살펴 볼 때 CSS 를 바꾸는 코드와 Html 동적 이벤트 가 뒤죽박죽 섞기기 때문에 아래와 같이 관리 하는 게 중요하다.

- Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    
    <title>Momentum</title>
</head>
<body>
    <div class = "title">
       <h1>Grab Me!</h1>
    </div>
    <script src = "app.js"></script>
</body>
</html>

 

- style.css

body {
    background-color: aliceblue;
}

h1 {
    color : blue;
    transition: color .5s ease-in-out;
}

.active {
    color: tomato;
}

*이런 식으로 미리 h1 과 active 라는 클래스 의 색을 지정해준다.   

 

- app.js

//요소 선택
const title2 = document.querySelector("div.title:first-child h1");

//Event handler 
function handleTitleEnter(){
  //변수 초기화 
  const className = title2.className;
  const hoverClass = "active";
  let changeName;
  
  if(className === hoverClass){
    changeName = "";
  }else{
    changeName = hoverClass;
  }
  title2.className = changeName;
  
}


//Call the event upon the user's behavior
title2.addEventListener("mouseenter" , handleTitleEnter);

* JS 에서는 CSS 에서 미리 지정한 Tag/Class/ID 을 가지고 Html 요소 를 자유롭게 조작 할 수 있다.  

* 또한 const hoverClass 의 값을 CSS 의 "active" 라는 raw value 로 지정해준다면, syntax 에러 를 미연에 방지 할 수 있다.  

 

 

Problem ) 만약 Html 요소가 하나의 class 를 이미 가지고 있고, 이를 유지하면서 다른 class 도 같이 관리하고 싶다면 어떻게 해야 할까? 

--> Use of "classList" 

요소의 클래스 들을 list 형식으로 관리 할 수 있게 해준다.

//아래 두개의 선택자는 같은결과를 줌
const title2 = document.querySelector("div.title:first-child h1");

//Event handler 
function handleTitleEnter(){
  const titleClass = title2.classList;
  const hoverclass = "active";
  let changeName;
  
  //if title has class of "active"
  if(titleClass.contains(hoverclass)){

    titleClass.remove(hoverclass);
  }else{

    titleClass.add(hoverclass);

  }
}

//Call the event upon the user's behavior
title2.addEventListener("mouseenter" , handleTitleEnter);

classList 에는 많은 메소드 들이 있는데, 그중 contains, add 그리고 remove 를 써줬다. 

--> contains("className") = checks whether the element contains input "className" and returns true / false. 

--> add("className") = adds "className" 

--> remove("className") removes "className"

 

 - classlist.toggle() 

Toggle() 은 위에 설명된 코드들의 기능을 하는 메소드 로, 조금 더 간편히 쓸 수 있다. 

//아래 두개의 선택자는 같은결과를 줌
const title2 = document.querySelector("div.title:first-child h1");

//Event handler 
function handleTitleEnter(){
  //toggle
  title2.classList.toggle("active");
}

//Call the event upon the user's behavior
title2.addEventListener("mouseenter" , handleTitleEnter);

 

'JS' 카테고리의 다른 글

JS Clone Project [Login] - 2, Getting User Input  (0) 2021.12.04
JS Clone Project [Login] - 1  (0) 2021.12.03
JS - Vanilla JS Clone Project [Event Handlers]  (0) 2021.12.02
JS - Vanilla JS Clone Project [JS with DOM]  (0) 2021.12.02
JS - Vanilla JS Clone Project [JS Recap]  (0) 2021.12.01
'JS' Related Articles more
Comments