<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>색상변경 예제 1-1</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
window.addEventListener("load", function(){
//검정버튼
var btnBlack = document.querySelector(".btn-black");
btnBlack.addEventListener("click", function(){
var h1 = document.querySelector(".target");
h1.style.color = "black";
});
//빨강버튼
var btnRed = document.querySelector(".btn-red");
btnRed.addEventListener("click", function(){
var h1 = document.querySelector(".target");
h1.style.color = "red";
});
//파랑버튼
var btnBlue = document.querySelector(".btn-blue");
btnBlue.addEventListener("click", function(){
var h1 = document.querySelector(".target");
h1.style.color = "blue";
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1 class="target">색상 변경 예제</h1>
</div>
<div class="row">
<button class="btn btn-black">검정</button>
<button class="btn btn-red">빨강</button>
<button class="btn btn-blue">파랑</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>색상변경 예제 1-2 </title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
window.addEventListener("load", function(){
var buttonList = document.querySelectorAll(".btn");
//반복문으로 이벤트 설정 및 실행 코드 작성
for(var i=0; i < buttonList.length; i++) {
buttonList[i].addEventListener("click", function (){
//this == 클릭한버튼(주인공)
var h1 = document.querySelector(".target");
//h1.style.color = buttonList[i].dataset.color;//오답이지만 굿!
h1.style.color = this.dataset.color;//정답!
});
}
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1 class="target">색상 변경 예제</h1>
</div>
<div class="row">
<button class="btn" data-color="black">검정</button>
<button class="btn" data-color="red">빨강</button>
<button class="btn" data-color="blue">파랑</button>
</div>
<div class="row">
<button class="btn" data-color="yellow">노랑</button>
<button class="btn" data-color="green">초록</button>
<button class="btn" data-color="gray">그레이</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 전화기 화면 (1) | 2023.10.04 |
|---|---|
| 글자크기 조절 문제 (2) | 2023.09.30 |
| 이벤트 콜백(callback) (0) | 2023.09.26 |
| 예상 결제 금액 계산 (1) | 2023.09.25 |
| 이용약관 (0) | 2023.09.22 |