[TIL_12] js 안의 css

className과 classList

className은 html안에 았는 class들은 상관 않고 모든 class들을 교체해버린다.

classList element의 class내용물을 조작하는 것을 허용함으로서 class들의 목록으로 작업 할 수 있게끔 한다.

containsclassList가 'clickedClass'를 포함 하고 있는지 확인한다.

• html에는 없고 css에서 디자인 한걸 js로　class이름을 끌어와서 html에도 넣는 방법

function(){
    title.className ="clicked";
}

title 이라는 이름을 가진 요소의 class에 'clicked'를 추가 할 수 있다.

remove & add

remove addclickedClass가 title의 classList에 포함되어있다면 clickedClass를 제거하고, 포함되어있지 않다면 classList에 clickedClass를 추가한다.

className===" "; 값이 같은지 확인한다
className=" "; 값을 변경해준다.

const clickedClass="clicked";  ---1

if(title.classList.contains(clickedClass)){
    title.classList.remove(clickedClass);
}  else{
    title.classList.add(clickedClass);
}

1. classname을 함수안에 상수로 설정하면, 그 밑으로는 상수 명만 넣어주면 되기때문에 오타에 의한 오류를 줄일 수 있고, 오류가 나더라도 원인을 찾기 쉬워진다.

toggle function

• 상수의 classList에 className이 존재하는지 확인하고 존재하면 제거하고, 존재 하지 않는다면, 추가한다.

title.classList.toggle("clicked");
이 한 줄로 위의 코드 여러줄을 대신할 수 있다.