2021.09.26 > JS #3.6~#3.8 수강
2021.10.22 > 복습
2021.10.23 > 정리

JS ON THE BROWSER

#3.6 - CSS in JavaScript (1)

JavaScript를 동작했을때 CSS의 스타일에 영향을 주려면 어떻게 해야할까?

• 우선 아래와 같이 html에서 class를 불러와준다.
  const a = document.querySelector(".className tag");

• console.log(tag.style.color) 를 출력 해주면 tag의 color를 획득 = getter

• tag.style.color = "blue" 로써 tag 의 color 를 설정 = setter

• console.log(tag.style.color) 를 다시 출력해주기

function functionName() {
    console.log(tag.style.color);
    tag.style.color = "blue"
    console.log(tag.style.color);
}

a.addEventListener("eventName", functionName);

if-else 활용

function functionName() {
    if (tag.style.color === "blue") {
        tag.style.color = "tomato"
    } else {
        tag.style.color = "blue"
    }
}

a.addEventListener("eventName", functionName);

const & let 값을 활용

• tag.style.color 호출을 줄여서 아래와 같이 더 깔끔한 코드를 작성할 수 있다.

• 아래 코드를 간단히 설명하자면, currentColor 로써 tag.style.color 의 현재상태를 지정해주고,

• let newColor 로써 공간을 만들어주지만, 값은 비워놓은 상태를 만들어준다.

• 조건문을 통과하면서 newColor 의 값은 채워진다.
  하지만 컴퓨터는 아직 newColor 가 뭔지 모르기 때문에

• tag.style.color = newColor 라는 조건문을 마지막으로 입력해준다.

function functionName() {
    const currentColor = tag.style.color;
    let newColor;
    if (currentColor === "blue") {
        newColor = "tomato"
    } else {
        newColor = "blue"
    }
    tag.style.color = newColor;
}

a.addEventListener("eventName", functionName);

#3.7 - CSS in JavaScript (2)

style관련된걸 JS에 입력하기 보다는, CSS와 연동해보자.

.className = "className"

• 해당 코드를 JS에 추가해주면 html에 className을 적용해준다.

• 이 것이 getter 이면서 setter 역할을 해줌

• 다시 원래대로 돌려주려면 아래 코드를 활용해주자.
  .className = "";

• 이걸 if-else 를 활용해서 반복해주면, 아래 코드와 같이 된다.

• 이때의 A(class name)를 const a 에 저장해주고 a 를 대신 적어주자.
  이러면 혹시 typo 가 나더라도 에러를 JS 가 콘솔창에서 알려준다.

function functionName() {
    const a = "A"
    if (tag.className === a) {
        tag.className = "";
    } else {
        tag.className = a;
    }
}

a.addEventListener("eventName", functionName);

근데 이 방법은 기존에 class name 이 있는 경우에도 상관하지 않고
모든걸 교체해버린다. 기존에 class name 이 있는 경우,
이를 유지하면서 JS 를 통해 class name 을 추가하는 방법은 무엇일까?

#3.8 - CSS in JavaScript (3)

.classList.contains(className)

className이 html element의 class에 포함되어 있는지 알려준다.

.classList.add(className)

className을 html element의 class에 추가해준다.

.classList.remove(className)

className을 html element의 class에서 제거해준다.
위의 .classList 를 활용해서 아래와 같은 코드를 만들었다.

function functionName() {
    const a = "A"
    if (tag.classList.contains(a)) {
        tag.classList.remove(a);
    } else {
        tag.classList.add(a);
    }
}

a.addEventListener("eventName", functionName);

.classList.toggle(className)

• 아래 예시로 들자면, tag 의 classList 에 A class 가 있는지 확인해서,

• 만약 있다면 toggle 이 A class 를 remove 해준다.

• 만약 tag 의 classList 에 A class 가 없다면,

• 다시 toggle 이 A class 를 add 해준다.

function functionName() {
    tag.classList.toggle(A)) {
}
  
a.addEventListener("eventName", functionName);

이 외에도 MDN 에 많은 DOMTokenList 가 있다. 아래 링크로 살펴보자.
DOMTokenList - MDN

---