CSS in JavaScript(if, else, toggle, className, classList, remove, add etc)
클릭할때마다 h1의 text가 파란색, 토마토색 으로 번갈아 가며 변하는
위 코드를 의도를 알기쉽게 변경
하지만 위코드도 보완할 점이 있는것이 h1.style.color=newcolor; 코드와 같이
css 가 아닌 js에서style을 변경하고 있다는 점임
위 코드를 CSS와 상호작용하는 JS코드로 변경
h1.className 은 getter이자 setter임 즉 console.log로 h1.className을 출력하면 처음엔 아무것도 없고
className입력시 생겨(처음 값 파란색이었다가 클래스네임 active로 생기면 토마토색)
클래스네임 액티브이면 클래스네임 없애 그러면 위에 css에서 설정한 h1디폴트값 파란색
클래스네임 없으면(파란색) 클래스네임 엑티브로 해줌(토마토색)
css아래와 같이도 가능, 색 천천히 변화하는것
여기서 transition : color 0.5s ease-in-out; 코드 이해하기
색을/ 0.5s 지속시간 /서서히 번화시킴
h1태그의 텍스트 클릭 할 때, 파란색 토마토색 번걸아가며 나오게
JS코드
|
1
2
3
4
5
6
7
8
9
10
11
|
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if(h1.className==="active"){
h1.className="";//h1의 클래스네임 엑티브면 없애서 h1 디폴트인 파란색으로
}else{
h1.className="active";//클래스네임없으면 active 이름붙여서 토마토색으로
}
}
h1.addEventListener("click",handleTitleClick);
|
cs |
CSS코드 예
|
1
2
3
4
5
6
7
8
9
10
11
12
|
body{
background-color: beige;
}
h1 {
color : cornflowerblue;
transition : color 0.5s ease-in-out;
}
.active {
color : tomato;
}
|
cs |
그런데 위 JS코드에서 active 와같은 raw value를 여러번 쓸 경우 추후 에러발생 확률 큼
클래스네임변경시 html코드, js코드에서 3부분 변경해줘야하고, 오타났을경우에도 실행은 되므로 뭐가 틀렸는지도 모르는 상황이 발생할 수 있음
따라서 아래와 같이 const변수를 선언해줌으로써 변경해줘야 할부분 줄일 수 있으며
clickedClass 부분 오타발생시 콘솔창에 정의되지 않았다는 에러도 뜨게됨
=>따라서 반복되는 string을 변수에 저장하는것이 효율적임
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "active";//h1클래스네임 변경될시 이부분만 수정하면 되서 에러확률 낮춤
if(h1.className===clickedClass){
h1.className="";
}else{
h1.className=clickedClass;
}
}
h1.addEventListener("click",handleTitleClick);
|
cs |
그런데
위코드는 클래스에 아무이름도 없는 상태에서 시작할때만 용이한 방법임
만약 클래스네임이 현재 sexy-font이라면 sexy-font의 css코드가 어떻게 돼있건 없건
클릭하는 순간 파란색 토마토색으로 변경만 함, sexy-font의 css코드는 무시됨
그러면 아래와 같이 sexy-font를 조건문에 추가 할수는 있음
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "active sexy-font";
if(h1.className===clickedClass){
h1.className="";
}else{
h1.className=clickedClass;
}
}
h1.addEventListener("click",handleTitleClick);
//처음에 파란색 일반글씨체였다가 클릭하면 빨간색 sexyfont로 변경되는식
//아래는 html 코드
<!DOCTYPE html>
<html>
<head>
<title>Momentum</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="hello">
<h1 class="sexy-font">click me!!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
|
cs |
하지만 위와 같은 방법도 좋은 방법은 아님
class 추가하거나 등 html변경되면 js까지 업데이트 해줘야 하므로
js로 모든 class name을 변경하지는 않을 방법이 필요함,
원래 있던 클래스네임(ex. sexy-font)를 keep해주며 clicked 부분을 변경하고 싶음
즉, sexy-font를 삭제하지 않고 clicked class를 변경하고 싶음
classList의 사용법
class들의 목록으로 작업할수있게 해줌
className은 이전의것이 무엇이든 상관없이 모든걸 교체해버림
반면, classList에는 여러 함수가 있는데 예를들어 contain 함수의 경우 우리가 명시한 class가 html element의 class에 포함되어있는지 말해줌
classList사용하여 코드 업데이트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const clickedClass = "active";
if(h1.classList.contains(clickedClass)){
//clieckedClass가 h1의 classList에 포함되어 있다면
h1.classList.remove(clickedClass);
//h1.className=""; clieckedclass지워줘
}else{//clickedclass가 h1 classlist에 포함되어 있지 않다면
h1.classList.add(clickedClass);
//h1.className=clickedClass; clieckedclass 추가해줘
}
}
h1.addEventListener("click",handleTitleClick);
//sexy-font유지한채로 파란색이었다가 토마토색으로
|
cs |
하지만 위와 같이 클래스네임을 포함하고 있는지 확인하고 추가해주고 제거해주는 작업은 흔한 것이기에 function이 존재
toggle function
toggle함수는 class name이 존재하는지 확인함, 존재한다면 제거해주고 존재하지 않는다면 추가해줌
즉, 이부분을 간편하게 대체하는 함수임
toggle함수를 적용하면 아래와 같이 간편하게 변경됨
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
h1.classList.toggle("active")
//active string 한번만 사용하므로 따로 변수 선언안해도됨
}
h1.addEventListener("click",handleTitleClick);
|
cs |