- DOM을 사용하면 자바스크립트가 주인이 되어 HTML 요소를 가져와서 이벤트 처리기를 연결 할 수 있음
- 웹요소.onclick =함수 ;
- querySelector(클래스 이름, id 이름 etc) 사용
- 버튼 클릭해서 글자색 바꾸기
1) 웹 요소를 변수로 지정 & 미리 만든 함수 사용
//방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color="#f00";
}
2) 웹 요소를 따로 변수로 만들지 않고 사용
//방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector("#change").onclick=changeColor;
function chageColor{
document.querySelector("p").style.color="#f00";
}
3) 함수를 직접 선언
//방법 3: 함수를 직접 선언
document.querySelector("#change").onclick=function{
document.querySelector("p").style.color="#f00";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼을 클릭해서 글자색 바꾸기 </title>
<style>
p {
width:80%;
padding:10px;
line-height:2em;
}
</style>
</head>
<body>
<button id="change">글자색 바꾸기</button>
<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
<script>
//방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color="#f00";
}
</script>
</body>
</html>
- 버튼 클릭해서 설명 글 열고 닫기 - DOM 이벤트 처리기 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 클릭해서 설명 글 열고 닫기- DOM 이벤트 처리기 연걸 </title>
<style>
#item {
position:relative;
width:500px;
height:auto;
padding:15px 20px;
margin:auto;
}
button {
background-color:rgba(255,255,255,0.7);;
padding:5px;
border:1px solid #ccc;
font-size:0.8em;
}
.over {
position:absolute;
left:30px;
bottom:30px;
}
.detail {
width:400px;
text-align:left;
line-height:1.8;
display:none;
}
</style>
</head>
<body>
<div id="item" >
<img src="images/flower.jpg" alt="">
<button class="over" id="open">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
<script>
document.querySelector('#open').onclick= function() {
document.querySelector('#desc').style.display="block";
document.querySelector('#open').style.display="none";
}
document.querySelector('#close').onclick = function() {
document.querySelector('#desc').style.display="none";
document.querySelector('#open').style.display="block";
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 15장 마무리 문제 2 (0) | 2023.04.08 |
|---|---|
| 15장 마무리 문제 1 (0) | 2023.04.08 |
| 15장 실습 2 (0) | 2023.04.07 |
| 15장 - 이벤트와 이벤트 처리기 (0) | 2023.04.07 |
| 15장 - 익명 함수/ 즉시 실행 함수/ 화살표 함수 (0) | 2023.04.07 |
