빠른 팁 : 바닐라 JavaScript로 CSS 클래스 추가 또는 제거

JavaScript를 사용하여 웹 요소를 쉽게 조작하기 위해 CSS 클래스를 동적으로 추가하고 삭제하십시오! 이 기사에서는

및 속성을 ​​사용하여 JavaScript의 속성을 사용하여 CSS 클래스를 효율적으로 관리하고 메뉴 표시/숨기기, 형식 오류 또는 요소 애니메이션 강조 표시와 같은 웹 페이지 요소의 동적 수정을 실현하는 방법을 설명합니다. className classList

코어 포인트 :

JavaScript는 사용자 상호 작용 (예 : 메뉴 표시/숨기기, 형태 오류 또는 애니메이션 효과)을 기반으로 페이지 요소를 동적으로 수정하는 데 사용될 수 있습니다.

및 속성은 CSS 클래스를 운영하기위한 강력한 도구이며

는 더 현대적이고 편리합니다.

는 또는
• 속성을 ​​사용하여 함수를 생성하고 클래스를 요소에 추가 또는 삭제할 수 있습니다. 이러한 함수는 문자열 선택기 또는 요소 자체를 매개 변수로, 요소를 통해 루프하고 지정된 클래스를 추가하거나 삭제할 수 있습니다.
• 속성 (IE10 이상의 브라우저에서 지원)은 , className 및 classList를 포함하여 클래스를 추가하거나 삭제하는 프로세스를 단순화하는 일련의 클래스를 제공하는 일련의 메소드를 제공합니다. className classList 호환성 체계 :
속성 를 사용하십시오
• className 속성을 ​​사용하면 HTML 요소의 클래스 속성에 액세스 할 수 있습니다. 문자열 작업을 통해 클래스를 추가하고 삭제할 수 있습니다. 우리는 메소드를 사용하여 HTML 요소를 선택합니다 (IE8 이상의 브라우저와 호환). classList
추가 클래스 :
• classList 클래스 삭제 : add remove 현대화 솔루션 : 속성 toggle 를 사용하십시오 IE10 이상의 브라우저는
속성을 ​​지원하여 클래스 작동을 단순화합니다.

추가 클래스 : className 클래스 삭제 :

요약

className 이 기사에서는 및 속성을 ​​사용하여 CSS 클래스를 추가 및 삭제하는 방법을 소개합니다. 이러한 기술을 습득하면 웹 요소의 동적 효과를 쉽게 달성하고 사용자 경험을 향상시킬 수 있습니다. querySelectorAll() faqs (faqs)

바닐라 JS를 사용하여 CSS 클래스를 추가하거나 제거하는 목적? 사용자 작업에 대한 응답, 요소 표시/숨기기, 애니메이션 효과 생성 등 HTML 요소의 외관 및 동작을 동적으로 제어합니다.

function addClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  for (let i = 0; i < elements.length; i++) {
    if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
      elements[i].className += ' ' + myClass;
    }
  }
}

를 사용하여 여러 클래스를 추가하는 방법? 클래스 이름을 독립 매개 변수로 전달합니다.

요소에 존재하지 않는 클래스를 삭제할 수 있습니까?

function removeClass(elements, myClass) {
  if (!elements) return;
  if (typeof elements === 'string') elements = document.querySelectorAll(elements);
  else if (elements.tagName) elements = [elements];
  const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
  for (let i = 0; i < elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg, ' ');
  }
}

예,

는 오류를보고하지 않지만 작업을 수행하지 않습니다.

요소에 특정 클래스가 포함되어 있는지 확인하는 방법은 무엇입니까?

메소드를 사용하여 부울 값을 반환하십시오. classList.contains()

동시에 여러 요소로 클래스를 조작하는 방법은 무엇입니까?

를 사용하여 요소를 선택한 다음 각 요소의 클래스를 반복하고 조작하십시오.

요소 클래스를 전환하는 방법은 무엇입니까? querySelectorAll() 사용

메소드를 사용하십시오.

classList.toggle()와 의 차이?

는 문자열 속성입니다.

는

객체를 반환하여보다 편리한 클래스 작동 방법을 제공합니다. className classList className SVG 요소가 지원됩니까? classList 지원. DOMTokenList

브라우저 호환은

의 호환성은 어떻습니까? 최신 브라우저는 널리 지원되며 IE9 이상은 지원되지 않습니다. classList

메소드를 체인에서 호출 할 수 있습니까?

예.

이 기사가 도움이되기를 바랍니다! classList

위 내용은 빠른 팁 : 바닐라 JavaScript로 CSS 클래스 추가 또는 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!