바닐라 자바스크립트를 사용하여 웹사이트 위로 마우스를 이동할 때 웹사이트의 배경색을 변경하는 방법을 알아보세요.
HTML
다음은 간단한 HTML 페이지에 대한 몇 가지 마크업입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Move your move over this page</h1>
</body>
</html>자바스크립트
사용자가 페이지의 특정 부분 위로 마우스를 이동할 때 배경색을 변경하려면 다음을 수행해야 합니다.
- 타겟
<body>요소에 대한 참조를 변수에 저장합니다. window의 이벤트 리스너mouseover를 수신하는 객체 이벤트.backgroundColor적용 색상 값이 있는 속성
JavaScript 파일에 다음 코드를 추가하십시오.
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})이제 사용자가 웹사이트의 아무 곳이나 마우스를 가져가면 배경색이 즉시 빨간색으로 바뀝니다.
코드 데모를 확인하세요.
색상 값의 경우 실제 이름(예:"빨간색"), 16진수를 사용할 수 있습니다. 또는 rgba 가치.