<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#btn{
margin-left: 30px;
margin-bottom: 20px;
}
</style>
<script type="text/javascript">
function photoSmall() {
var myimg=document.getElementById("myimg");
//myimg의 width속성 가져오기
var w=myimg.getAttribute("width");
console.log(typeof(w)); //w속성을 콘솔창에 찍어보기
w-=10; //string타입이라 하더라도 -,*는 숫자로 계산됨(+만 안 되기에 콘솔창에 찍어보는 것)
myimg.setAttribute("width",w);
}
function photoLarge() {
var myimg=document.getElementById("myimg");
//myimg의 width속성 가져오기
var w=myimg.getAttribute("width");
w=parseInt(w); //string타입이라 +는 안 되기에 캐스팅해주기(parseInt)
console.log(typeof(w)); //w속성을 콘솔창에 찍어보기
w+=10;
myimg.setAttribute("width",w);
}
</script>
</head>
<body>
<h2>1번_이미지확대 축소</h2>
<div id="btn">
<button type="button" onclick="photoSmall()">작게</button>
<button type="button" onclick="photoLarge()">크게</button>
</div>
<img alt="" width="400" src="../star/star1.jpg" id="myimg"> <!-- width속성 해주기 -->
<hr>
<h2>2번_배열이미지출력(5개)</h2>
<script type="text/javascript">
var imgarr=["../image/b01.png",
"../image/b02.png",
"../image/b03.png",
"../image/b04.png",
"../image/b05.png",];
var s="";
for(var i=0;i<imgarr.length;i++)
{
s+="<img src='"+imgarr[i]+"' width='200'>";
}
document.write(s);
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210927_table,checkbox,radio (0) | 2021.09.28 |
|---|---|
| 210927_button,onchange (0) | 2021.09.27 |
| 210927_array,button,image,push,innerHTML (0) | 2021.09.27 |
| 210927_image,innerHTML,confirm,button (0) | 2021.09.27 |
| 210927_button,image(절대주소,상대주소) (0) | 2021.09.27 |