#3.6: CSS in Javascript
getter & setter
// JS
const h1=document.querySelector("h1");
function handleTitleClick(){
console.log(h1.style.color); // getter
h1.style.color = "blue"; // setter
console.log(h1.style.color); // getter
}
h1.addEventListener("click",handleTitleClick);getter: 값을 받아오는 것
setter: 값을 설정하는 것
if 문 사용해서 blue -> tomato -> blue -> .... 만들기
1. 단순한 if - else 구문
// JS
const h1=document.querySelector("h1");
function handleTitleClick(){
if(h1.style.color === "blue"){
h1.style.color = "tomato";
}
else {
h1.style.color = "blue";
}
}
h1.addEventListener("click",handleTitleClick);
2. 변수에 저장하기
h1.style.color를 많이 호출하기 보다는 color 현재 상태를 저장하자.
// JS
const h1=document.querySelector("h1");
function handleTitleClick(){
const currentColor = h1.style.color; // 현재 h1의 color 상태를 변수에 저장.
let newColor; // empty
if(currentColor === "blue"){ // 현재 상태가 blue면 tomato로
newColor = "tomato";
}
else { // 현재 상태가 not blue, 즉 tomato면 blue로
newColor = "blue";
}
h1.style.color =newColor; // 현재 상태를 newColor 상태로 업데이트
}
h1.addEventListener("click",handleTitleClick);이 코드를 시행해보다가 궁금한 점이 생겼다.
1. 굳이 const 로 currentColor를 선언하는 이유
2. 따지고 보면 currentColor는 한 주기를 거칠 때마다 업데이트 되는데 그렇다면 let으로 선언되어야 하지 않나? function 안에서 선언된 const는 function 내를 한 주기 거칠 때만 const라는 것인가?
3. 코드를 순차적으로 실행한다고 했을 때, 무한루프 문을 사용하지 않는다면 저렇게 무한히 반복될 수 없지 않나? 왜 무한히 반복되는 걸까?
생각을 좀 해봐야겠다.
#3.7: CSS in Javascript part Two
JS에서 CSS를 완전히 분리해보자.
className과 if-else문을 이용해서 class를 넣었다 뺄 수 있다.
<!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>Classic challenge 1</title>
</head>
<body>
<h1>Hello!</h1>
<script src="app.js"></script>
</body>
</html>//CSS
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
transition: color 0.5s ease-in-out;
}
.clicked{
color: tomato;
}// JS
const h1=document.querySelector("h1");
function handleTitleClick(){
if (h1.className === "clicked") { // h1.className은 getter 이면서 setter
h1.className=""; // class 비운다.
} else {
h1.className = "clicked";
}
}
h1.addEventListener("click",handleTitleClick);이때 TIP!!!
CSS에서 JS로 class 명을 받아올 때 string을 사용하면, 말 그대로 문자열이기 때문에 오타 등의 이유로 틀리면 브라우저는 아무것도 알려주지 않는다. 따라서 class 명을 하나의 변수로 지정해서 문자열 대신 변수를 입력하면 오류를 방지할 수 있다.
//JS
const h1=document.querySelector("h1");
function handleTitleClick(){
const clickedClass="clicked";
if (h1.className === clickedClass) { // h1.className은 getter 이면서 setter
h1.className=""; // class 비운다.
} else {
h1.className = clickedClass;
}
}
h1.addEventListener("click",handleTitleClick);
#3.8: CSS in Javascript part Three
className
이전에 존재하던 class는 상관하지 않고 모든 걸 교체해버린다.
h1에 이전에 a, b, c class가 존재했다고 가정하자. 이때 h1.className="d"; 라고 입력하면 h1에는 d의 class만 존재하게 된다.
classList
className 대신 사용한다. class들의 목록으로 작업할 수 있게끔 허용한다. 아래의 functions를 보자.
h1.classList.contains(클래스이름);
우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다. boolean값을 return한다.
h1.classList.remove(클래스이름);
element에서 클래스를 삭제한다.
h1.classList.add(클래스이름);
element에서 클래스를 추가한다.
// JS
const h1=document.querySelector("h1");
function handleTitleClick(){
const clickedClass="clicked";
if (h1.classList.contains(clickedClass)) { // h1.className은 getter 이면서 setter
h1.classList.remove(clickedClass); // class 비운다.
} else {
h1.classList.add(clickedClass);
}
}
h1.addEventListener("click",handleTitleClick);
toggle
class name이 존재하는지 확인한다.
만약 class name이 존재한다면, toggle은 class name을 제거한다.
만약 class name이 존재하지 않는다면, toggle은 class name을 추가한다.
즉, toggle은 아래의 코드를 구현한다.
// JS
if (h1.classList.contains(clickedClass)) { // h1.className은 getter 이면서 setter
h1.classList.remove(clickedClass); // class 비운다.
} else {
h1.classList.add(clickedClass);
}toggle을 사용하면 위에 코드가 아래와 같이 간단해질 수 있다.
// JS
const h1=document.querySelector("h1");
function handleTitleClick() {
h1.classList.toggle("clicked");
}
h1.addEventListener("click",handleTitleClick);const는 string을 반복할 때 필요하므로 지워줄 수 있다.
'Study > Web' 카테고리의 다른 글
| [JS] 바닐라 JS | #5.0~5.3) 시계 만들기 (0) | 2021.08.04 |
|---|---|
| [JS] 바닐라 JS | #4.0~4.6) 입력폼 만들기 (0) | 2021.08.03 |
| [JS] 바닐라 JS | #3.0~3.5) 오브젝트, 배열, 이벤트 (0) | 2021.07.29 |
| [JS] 바닐라 JS | #2.7~2.16) 함수의 사용 & 조건문 (0) | 2021.07.28 |
| [JS] 드림코딩 | #6) 클래스와 오브젝트의 차이점 & 객체지향 언어 (0) | 2021.07.28 |
