JavaScript로 클래스 토글
JavaScript를 사용하여 HTML 요소의 클래스를 토글하는 방법을 소개합니다.
JavaScript에서 마우스를 가져갈 때 HTML 요소의 클래스 토글
클래스를 토글한다는 것은 HTML 요소에 할당된 클래스 이름이 없는 경우 클래스 이름을 동적으로 설정하거나 특정 클래스가 이미 있는 경우 동적으로 제거할 수 있음을 의미합니다. 컴퓨팅에서 mouseover는 일반적으로 마우스로 트리거 영역 위로 포인터를 이동하거나 가리킬 때 활성화되는 그래픽 제어 요소입니다.
토글 기능은 JavaScript에 도입되었습니다. JavaScript 파일에서 문서의 지정된 CSS 선택기와 일치하는 첫 번째 요소를 반환하는 querySelector() 메서드를 사용합니다. 아래 파일에서 #container id는 <div> 요소와 연결됩니다. 따라서 변수 컨테이너에 <div> 요소가 있습니다. 마우스를 가져갈 때 클래스를 전환하는 데 필요한 기능을 얻으려면 HTML 문서에 이벤트 핸들러를 연결하는 addEventListener() 메서드를 사용해야 합니다. 그리고 실제 사용한 이벤트는 mouseenter와 mouseleave 이벤트입니다. mouseenter이벤트는 마우스 포인터가 요소 위로 이동할 때 발생합니다. mouseleave 이벤트는 마우스 포인터가 요소 밖으로 이동할 때 발생합니다.
mouseenter 이벤트가 발생하면 classList 속성, add() 및 remove() 메서드를 사용합니다. <div> 요소 클래스 위로 마우스 포인터를 이동하면 remove() 메서드에 의해 첫 번째 div 요소가 제거되고 <div> 요소에 second 클래스가 추가됩니다. 마찬가지로, 마우스 포인터가 밖으로 이동하면 first 클래스가 추가되고 second 클래스가 제거됩니다. 따라서 마우스가 <div> 요소 위에 있을 때 토글이 수행됩니다.
CSS 파일 styles.css 및 JavaScript 파일 index.js에 대한 링크가 각각 <link> 및 <script></script> 태그를 사용하여 HTML 문서에 지정된 HTML 문서가 있습니다. 토글할 클래스를 <div> 요소 위로 마우스 포인터를 가져가는 기능을 구현하려고 합니다. JavaScript를 사용하여 이를 수행할 것입니다. HTML에는 id 컨테이너에 의해 고유하게 식별되는 <div> 요소가 있으며 first 클래스는 이미 동일한 요소와 연결되어 있습니다.
CSS에서는 클래스 선택자의 속성과 값을 정의합니다. CSS를 단순하게 만들었으며 first 클래스에는 background 속성이 있으며 값은 녹색입니다. 유사하게 second 클래스에는 background 속성과 orange 값이 있습니다.
예제 코드:
<div id="container" class="first">
<h1>
JavaScript is Easy
</h1>
</div>
var container = document.querySelector('#container');
container.addEventListener('mouseenter', function() {
this.classList.remove('first');
this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
this.classList.add('first');
this.classList.remove('second');
})
.first {
background: green;
}
.second {
background: orange;
}
JavaScript에서 마우스 클릭 시 HTML 요소의 클래스 토글
위의 방법에서 이벤트 위에 마우스를 놓은 것처럼 마우스 클릭 시 JavaScript를 사용하여 HTML 클래스를 토글할 수 있습니다. 예를 들어, ID가 p인 <p> 태그가 있는 단락을 생성합니다. 태그 안에 텍스트를 작성하십시오. 그런 다음 onclick 속성을 사용하여 <button> 태그를 만듭니다. onclick 속성을 사용하여 myFunc() 함수를 호출합니다. 태그 사이에 Button 텍스트를 씁니다.
CSS에서 클래스 선택기로 paragraphClass를 선택하고 font-size를 30px로, color를 red로 지정합니다. JavaScript에서 myFunc() 함수를 작성하고 getElementById로 HTML의 p id를 선택하고 para 변수에 저장합니다. classList 속성을 호출한 다음 변수와 함께 toggle() 메서드를 호출합니다. paragraphClass 클래스를 toggle() 메소드의 매개변수로 작성합니다.
getElementById() 메소드를 사용하여 변수 para 내부의 p 요소를 확보했습니다. classList 속성을 사용하여 toggle() 함수를 HTML 문서의 <p> 요소에 사용했습니다. 하단을 클릭하고 myFunc()를 실행하면 <p> 요소에서 CSS 클래스 선택기 paragraphClass가 켜짐 및 꺼짐으로 전환됩니다. 따라서 마우스 하단을 클릭하면 토글됩니다.
예제 코드:
<p id="p">
Click Button to toggle between classes
</p>
<button onclick="myFunc()">
Button
</button>
.paragraphClass {
font-size: 30px;
color: red;
}
function myFunc() {
var para = document.getElementById('p');
para.classList.toggle('paragraphClass');
}