자바스크립트 (15) - 자바스크립트와 css
css에선 자스에서 변경하는 것보다 더 스마트하고 멋지게 스타일 작업을 할 수 있다.
자스는 애니메이션에 적합하다.
html css js 삼신기의 춤사위를 보자.
index.html은 css문서와 js파일을 임포트하고 있다.
.active {
color:tomato;
}이제 어떤 엘리면트든 active 를 클래스명으로 가지면 토마토색됨.
자스에서 이제 하고 싶은건 h1클래스에 active 클래스를 전달해주고 싶음.
const h1 = document.querySelector("div.hello:first-child h1");
h1.className은 getter이자 setter이다.
h1.className = "";
} else {
h1.className = "active"
이렇게하면 클릭할때마다 달라지게 할 수 잇음.
h1 {
color : cornflowerblue;
transition:color .5s ease-in-out
}
.active {
color: tomato;
}
더 깔끔하게 할 수 있는데, 방법이 두가지잇음.
첫번쨰는
h1.className = "";
} else {
h1.className = "active"
h1.className = "";
} else {
h1.className = clickedClass
이게 클린코드임.
<div class="hello">
<h1 class ="sexy-font"> Click me!</h1>
</div>
근데 만약 초반 html에서 class 네임이 다른거로 돼 잇었다면 어떻게 될까?
h1.className = "";
} else {
h1.className = clickedClass
자스는 과거를 생각하지도 않고 파괴해버림. 클래스명이 clicked class 로 돼잇기떄문에
sexyfont 라는 클래스명은 덮어씌워져서 아에 파괴돼 버림.
만약 이렇게 수정하면 어떨까?
h1.className = "";
} else {
h1.className = clickedClass
즉 고려해야할게,
자스로 전체의 class 네임을 변경하지는 않는 거임.
domtokenlist.contains(token)이 있는데, 이 function은 우리가 명시한 class 가html의 믈래스에 포함돼잇는지 반환해줌.
const clickedClass = "clicked";
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass)
html엘리먼트가 갖고 있는 또 하나의 요소를 사용하는 것임.
class list는 엘리먼트의 class 내용물을 조작하는 것을 허용한다 라고 나와잇음.
자스를 이용해 자스가 특정한 클래스명만 수정하도록 만들었음.
이게 개발자가 항상하는 일임. 이작업을 많이하게 될거임.
또 도움을 주는 것중에하나가 DOMTokenList.toggle임.
toggle function은 class name이 존재하는지 확인한다.
그리고 만약존재한다면 토글은 클래스명을 제거한다.
만약 존재하지 않는다면 클래스명을 추가한다. 그니까 토글은
const clickedClass = "clicked";
h1.classList.remove(clickedClass);
} else {
h1.classList.add(clickedClass)
function handleTitleClick(){
h1.classList.toggle("clicked");
클래스리스트에 clicked class 가 있는지 확인해서 있으면 제거, 없으면 만들어줌.