반응형
1. onclick
클릭시 문자변경 / 색상변경 / 크기변경 / 알림창
2. 시간초 떨어지게 하기
3. 사각형 움직임
4. setAttribute를 이용하여 css 파일 삽입하기
5. alert 경고창, textContent 글자 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movin gBox</title>
<style>
#box1 {
width : 200px;
height: 200px;
background-color: green;
color : white;
font-weight: bold;
text-align: center;
line-height: 200px;
}
#box2 {
width : 200px;
height: 200px;
background-color: blue;
color : yellow;
font-weight: bold;
text-align: center;
line-height: 200px;
}
</style>
<script>
window.onload = function() {
var box1 = document.getElementById("box1");
box1.onclick = function(){
alert("don't touch this");
}
var box2 = document.getElementById("box2");
box2.onclick = function(){
box2.style.fontSize = "40px";
box2.textContent = "tomorrow";
}
};
</script>
</head>
<body>
<div id = "box1" class = "hi">dzien dobry</div>
<div id = "box2" class = "hi" changeWords();>dobra noc</div>
</body>
</html>
6. onmouseover / onmouseout
마우스를 올려 놓았을 때 이미지를 다른 이미지로 변경하고 다시 돌아오게 하기
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<style>
.size {
width : 800px;
height: 600px;
}
</style>
<script>
function changeImg(){
var img1 = document.getElementById("img1");
img1.setAttribute("src", "./milosc.jpg");
img1.setAttribute("class", "size");
}
function changeImgBack(){
var img1 = document.getElementById("img1");
img1.setAttribute("src", "./meal.jpg");
img1.setAttribute("class", "size");
}
</script>
</head>
<body>
<img id = "img1" class = "size" onmouseover = "changeImg()"; onmouseout="changeImgBack()"; src = "./meal.jpg">
</body>
</html>
반응형
'자바스크립트' 카테고리의 다른 글
| onclick : 버튼 클릭시 글자변경 (0) | 2021.01.19 |
|---|---|
| hover, addClass, removeClass (0) | 2020.11.08 |
| #아이디 .클래스 와 #아이디.클래스 의 차이 (0) | 2020.11.07 |
| Chapter 11. jQuery 라이브러리 (0) | 2020.11.07 |
| Chapter 10. 문서 객체 모델 (0) | 2020.11.07 |