JS에서 style정의
-
element의 style을 JS에서 변경하는 것은 선호하지 않음
(다른 언어(css)들을 섞는건 별로 좋지 않음) -
JS를 상호작용을 만들어 내는데 적합. 하여 다음 예제에서 css파일에서 적용하는 것을 작성할 것
<!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">
<title>Momentum</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="hello"><h1>click me!</h1></div>
<script src="./app.js"></script>
</body>
</html>const h1 = document.querySelector(".hello:first-child h1");
function handleTitleClick(){
const currentColor = h1.style.color;
let newColor;
if(currentColor === "blue"){
newColor = "tomato";
}else{
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);-
currentColor는getter로써, 최근 color값을 복사하는 역할. 그렇기에 의미론적으로 봤을 때 const로 선언하는 것이 적절 -
newColor는setter로써, 변수에 대입된 색상값을h1.style.color에 최종적으로 할당하는 역할을 함. 그리고 이것도 의미론적으로 값이 변경될 수 있다는 것을 염두에 두기 위헤let으로 선언하는 것이 적절 -
프로그래민언어에서 “
=”표시는 오른쪽에 있는 값을 왼쪽에 대입. -
함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않음. 그렇기 때문에
const currentColor로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있음
이를 토대로 코드를 순차적으로 설명하면,
1) click event 발생 및 함수 실행
2) currentColor변수 선언 후 h1.style.color 값 복사(getter)
3) newColor변수 선언
4) currentColor현재 값 확인
5) 조건에 따라 newColor에 “tomato” or “blue” 값 대임
6) 마지막으로 h1.style.color에 newColor값 대입(setter)
우리는 현재 상태의 색깔 값을 currentColor라는 이름의 변수에 저장해주고, 클릭했을 때 바뀌게 될 새로운 색깔값을 newColor라는 이름의 변수에 저장해줄거고 이걸로 글자색(h1.style.color)을 바꿔줄것이라는걸 안다. (const currentColor = h1.style.color; 라고 했다고 이제부터 현재 색이 h1.style.color라는 것이 아님)
여기서 브라우저는 newColor가 무슨 용도인지 모르고 그냥 이름으로써 알고 있는 것
코드로 돌아가보면 어쨋든 지금 currentColor에 h1.style.color로 현재 데이터를 넣어줬으니 조건문을 통과하면서 비어있던(undefined 상태) 변수 newColor에는 tomato가 들어가게 된다.
근데 여기까지만으로는 브라우저가 이게 글자색으로 바꾸라는 뜻인지 모른다. 사람은 변수 이름을 지을 때 이미 의도를 갖고 있었기 때문에 자연스업게 알고 있겠지만 브라우저는 newColor라는 변수에 tomato를 넣긴 했는데 뭐 어쩌라는건지 모르고 있다는 것(newColor에 데이터만 들어가고 끝!인 상태)
그래서 반복문이 끝나는 바로 다음 줄에 h1.style.color = newColor;를 써줌으로써 글자색을 바꾸도록 해주어야한다.
CSS에서 스타일 적용 후 JS 상호작용하기
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
transition: color .5s ease-in-out;
}
.clicked{
color: tomato;
}const h1 = document.querySelector(".hello:first-child h1");
function handleTitleClick(){
const clickedClass = "clicked"
if(h1.className === clickedClass){
h1.className = "";
}else {
h1.className = clickedClass;
}
}
h1.addEventListener("click", handleTitleClick);
//아래와 같이 작성할 수 있지만 오타방지를 위해 위에 코드처럼 변수로 선언해준다. 변수가 오타 시에는 console에서 오류가 나타나지만 string의 경우 알려주지 않음
function handleTitleClick(){
const clickedClass = "clicked"
if(h1.className === clickedClass){
h1.className = "";
}else {
h1.className = clickedClass;
}
}기존 class유지하면서 class 추가하기
classList
-
classList우리가 class들의 목록으로 작업할수 있게끔 허용해준다. -
className은 이전class를 상관하지않고 모든걸 교체해 버린다. (기존 class삭제) -
classList를 이용하는건 js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것 = element의 class내용물을 조작하는 것을 허용한다는 뜻 -
contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.
const h1 = document.querySelector(".hello:first-child h1");
function handleTitleClick(){
const clickedClass = "clicked"
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click", handleTitleClick);toggle
- toggle은 토큰이 존재하면 토큰제거, 토큰존재 하지않으면 토큰 추가
ex) toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 className추가
const h1 = document.querySelector(".hello:first-child h1");
function handleTitleClick(){
h1.classList.toggle("clicked")
}
h1.addEventListener("click", handleTitleClick);해당 코드는 위에 코드와 같은 기능을 한다.
이 글은 패스트캠퍼스 노마드코더 '바닐라 JS로 크롬 앱 만들기'을 수강하며 정리한 노트입니다.
https://nomadcoders.co/javascript-for-beginners/lobby
