자바스크립트를 사용하여 해결하려고 하는데 문제가 있어서 질문드립니다.
버튼을 클릭하면 이미지는 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개 / 댓글 2개
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 + "픽셀";
}
답변에 대한 댓글 2개
txt.style.fontSize = '25px';
로 하면 됩니다.
답변을 작성하려면 로그인이 필요합니다.
그런데 혹시 출력되는 이미지의 정보 글자의 크기와 색상 변경은 어떻게 할 수 있는 지요?