Image Contraction & Enlargement
<body>
<div id="one">
<button type="button" onclick="photosmall()">점점작게</button>
<button type="button" onclick="photolarge()">점점크게</button>
</div>
<img src="../Food/f7.png" width="200" id="myimg">
</body>- ‘점점작게’와 ‘점점크게’ 버튼 각각과 이를 적용할 이미지 생성
<head>
<script>
function photosmall(){
var p=document.getElementById("myimg");
var w=p.getAttribute("width");
console.log(typeof(w)); //string인데 - * 는 숫자로 계산됨(+만 안됨)
w-=10;
p.setAttribute("width",w);
}
function photolarge(){
var p=document.getElementById("myimg");
var w=parseInt(p.getAttribute("width"));
//console.log(typeof(w));
w+=10;
p.setAttribute("width",w);
}
</script>
</head>-
프롬프트 창에서 입력된 인자 값은 모두 string
-
setAttribute 함수를 이용해 width 속성을 변경(대입 연산자를 통해 지속적으로 이미지 증감)
-
혹은 아래와 같이 프롬프트를 이용해 크기를 임의로 조정하는 방식도 있다
<body>
<button type="button"id="btn1">이벤트#1</button>
<img src="../만화이미지/10.png" width="250" id="imga">
</body>- 버튼과 이미지 생성
<head>
<script>
window.onload=function(){
document.getElementById("btn1").onclick=function(){
//사진의 현재 width값
var width=document.getElementById("imga").getAttribute("width");
var wth=prompt("이미지 너비를 입력해주세요",width);
if(wth==null)
alert("이미지 너비 변경 안할래요");
else if(wth=="")
alert("다시 입력해주세요");
else
document.getElementById("imga").setAttribute("width",wth);
}
</script>
</head>- 프롬프트에 입력한 값(wth)을 setAttribute 함수에 인자로 대입하여 직접 변경
Difference btw innerHTML & innerText
- innerText : 입력된 텍스트를 출력 (태그가 있다면 텍스트로 인식)
- innerHTML : html 요소를 인식하여 출력 (태그를 적용하여 출력)
<body>
<div id="result">테스트</div>
</body>- id 값이 result인 박스에 innerText와 innerHTML 모두 출력
<script>
document.getElementById("result").innerText="<u>hello~</u>";
document.getElementById("result").innerHTML="<u>hello~</u>";
</script>- innerText 결과 : <u>hello~</u> (태그가 노출)
- innerHTML 결과 : hello~ (태그가 적용)
This value
- 모든 이벤트 함수에는 이벤트 발생 객체에 대한 this라는 변수가 기본적으로 존재
<body>
<div class="container">
<select id="selimage">
<option value="../만화이미지/04.png" selected>남바포</option>
<option value="../만화이미지/05.png">남바파이브</option>
<option value="../만화이미지/06.png">남바식스</option>
<option value="../만화이미지/07.png">남바세븐</option>
</select>
</div>
<div>
<img src="" id="photo" width="300">
</div>
</body>- <select>와 <option>태그로 선택 툴 생성
<head>
<script>
window.onload=function(){
var selimage=document.getElementById("selimage");
var photo=document.getElementById("photo");
//alert(selimage.value); //현재 선택된 이미지
var init_img=selimage.value; //init행
//현재사진의 src속성을 변경한다
photo.setAttribute("src",init_img); //init행
//select 이벤트 _change
selimage.onchange=function(){
console.log(this.value); //this행
//사진의 src에 this.value를 적용
photo.setAttribute("src",this.value);
}
</script>
</head>- init행을 삽입한 이유는 선택 툴에서 초기값으로 설정된 이미지가 초기 이미지로 출력되기 위해
- this행(console.log(this.value);)를 콘솔에 출력하면 선택된 이미지의 경로가 출력
초보개발자
항상 좋은 글 감사합니다.