CSS classList.toggle 메서드(그리고 놀라운 기능)

여러분, 안녕하세요! 오늘 저는 CSS classList.toggle 메서드와 내가 찾은 흥미로운 기능에 대해 이야기하고 싶습니다.

따라서 메서드 자체가 수행하는 작업을 학습하여 시작하겠습니다.

<p>Lorem ipsum</p>

.blue {
  color: blue;
}

const p = document.querySelector("p");

p.classList.toggle("blue");

setTimeout(() => {
  p.classList.toggle("blue");
}, 5000)

따라서 위는 "Lorem ipsum"이라는 텍스트가 있는 p 태그가 있는 HTML 페이지의 스니펫입니다. js 부분에서 방금 수행한 작업은 먼저 태그를 선택한 다음 "파란색"클래스를 "전환"한 것입니다. 그것.

그리고 5초 후에 "파란색"클래스를 다시 "전환"했습니다.

이것이 의미하는 바는 JS가 기본적으로 요소에 "파란색"클래스가 있는지 확인하고 제거하고 없으면 단순히 요소를 추가한다는 것입니다.

이것은 많은 방법으로 사용될 수 있습니다! 더 반응적인 콘텐츠를 만들고 동적인 방식으로 단순히 숨기려면 "classList.toggle"메서드가 좋습니다!

하지만 방금 이야기한 특별한 부분은 어떻습니까?

아래 프로그램을 예로 들어 보겠습니다.

<p>Lorem ipsum</p>

<button>Increment</button>

.blue {
  color: blue;
}

.red {
  color: red;
}

const p = document.querySelector("p");
const incrementBtn = document.querySelector("button");
let i = 0;

p.classList.toggle("blue");

incrementBtn.addEventListener("click", (_) => {
  i++;
  if (p) {
    p.classList.toggle("red", i > 3);
    p.classList.toggle("blue", i <= 3);
  }
});

하지만 Kaan, 방금 부여한 두 번째 부울 속성은 무엇입니까? 내 친구가 토글 방법의 "강제"속성이라고 묻는 것을 들었습니다. 기본적으로 해당 메서드가 true이면 해당 요소에 클래스를 즉시 추가하고, 그렇지 않으면 즉시 제거합니다.

그래서 카운터를 만드는 데 사용했는데 3 이상이면 텍스트가 빨간색으로 바뀌고 그렇지 않으면 텍스트가 파란색이 됩니다!

이 속성을 사용하면 조건에 따라 항목을 추가하거나 제거할 수 있습니다. 이는 놀랍고 매우 유용합니다!

오늘의 기사가 도움이 되었기를 바랍니다. 그렇다면 좋아요를 눌러주시면 감사하겠습니다!

그리고 코드나 내가 제공한 정보에서 문제를 발견한 경우 언제든지 의견을 남기고 그것에 대해 알려주십시오. 사물에 대한 귀하의 의견을 듣고 싶습니다!

그때까지 다음 글에서 만나요!