오늘은 마우스 오버시 텍스트의 색상을 변경하는 예제를 만들어보겠습니다.
addEventListener : HTML 요소에 이벤트 핸들러를 동적으로 추가하는 데 사용됩니다. 이 메서드를 사용하면 웹 페이지의 다양한 요소에 대한 사용자의 상호작용을 감지하고, 특정 이벤트가 발생했을 때 실행할 함수를 지정할 수 있습니다.
코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>텍스트 색상 변경 예제</title>
</head>
<body>
<div id="textToChange" style="font-size: 24px;">마우스를 올려보세요!</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var textElement = document.getElementById('textToChange');
// 마우스 오버 이벤트
textElement.addEventListener('mouseover', function() {
textElement.style.color = 'red'; // 여기서 색상을 원하는 대로 변경하세요
});
// 마우스 아웃 이벤트
textElement.addEventListener('mouseout', function() {
textElement.style.color = 'black'; // 원래 색상으로 복원
});
});
</script>
</body>
</html>
결과입니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] 모달 만들기 (0) | 2024.04.19 |
|---|---|
| [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 (0) | 2024.04.18 |
| [JavaScript] Sidebar 만들기 (0) | 2024.04.10 |
| [Javascript] chart.js 를 사용하여 선 그래프 그리기 (0) | 2024.04.09 |
| [JavaScript] CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교하기 (0) | 2024.04.06 |
