버튼클릭 시 이미지 크기 확대와 이미지 크기 정보 표시
본문
자바스크립트를 사용하여 해결하려고 하는데 문제가 있어서 질문드립니다.
버튼을 클릭하면 이미지는 2배씩 커져서 표시되는데
이미지 밑에 표시되는 이미지에 대한 정보를 이미지에 맞게 변경되도록 하고 싶은데 잘 안되네요
<body>
<img id="image" src="flower.jpg" height="50" width="50"><br>
<span id="mySpan">높이: 50픽셀 * 폭: 50픽셀</span><br><br>
<input type="button" value="이미지 크기 X 2"
onClick="imageSizeX2()">
<script>
function imageSizeX2() {
var newimg = document.getElementById('image');
neww = newimg.width;
newh = newimg.height;
newimg.width = neww * 2;
newimg.height = newh * 2;
<span>태크 내에 표시하는 부분 <- 이미지 정보 변경되는 부분
????????
고수님들의 조언 부탁드립니다.
답변 1
function imageSizeX2() {
var newimg = document.getElementById('image');
neww = newimg.width;
newh = newimg.height;
newimg.width = neww * 2;
newimg.height = newh * 2;
var txt = document.getElementById('mySpan');
txt.innerHTML = "높이: " + newimg.width + "픽셀 * 폭: " + newimg.height + "픽셀";
}
답변 감사드립니다.
그런데 혹시 출력되는 이미지의 정보 글자의 크기와 색상 변경은 어떻게 할 수 있는 지요?
txt.style.color = 'red';
txt.style.fontSize = '25px';
로 하면 됩니다.