2017-03-17 33 views
1

我想縮小基於我在移動應用程序SoloLearn上學到的圖像。請幫忙。使用javascript縮小img

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="xyz.css"/> 
</head> 
<body> 
<img id="image" src="myImage.jpg"/> 
<button id="shrink">Shrink</button> 
<script> 

var x = document.getElementById('shrink'); 
var img = document.getElementById('image'); 
x.addEventListener("click", shrnk); 
function shrnk() { 
    img.style.width = 50; 
    img.syle.height = 25; 
}; 

</script> 
</body> 


</html> 

回答

0

而不是使用img.style只是設置圖像的寬度和高度值。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="xyz.css" /> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="http://www.placehold.it/150" /> 
 
    <button id="shrink">Shrink</button> 
 
    <script> 
 
    var x = document.getElementById('shrink'); 
 
    var img = document.getElementById('image'); 
 
    x.addEventListener("click", shrnk); 
 

 
    function shrnk() { 
 
     img.width = 50; 
 
     img.height = 25; 
 
    }; 
 
    </script> 
 
</body> 
 

 

 
</html>

0

widthheight風格不是數字,他們需要的單位,以及像px像素。所以

function shrnk() { 
    img.style.width = '50px'; 
    img.style.height = '25px'; 
} 

可以省略單位的唯一情況是,當你將它們設置爲0,因爲這是一樣的,不管單位。

0

如果您想使用樣式屬性,您需要設置您正在討論的數字的單位(即「px」)。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="xyz.css" /> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="http://lorempixel.com/200/200" /> 
 
    <button id="shrink">Shrink</button> 
 
    <script> 
 
    var x = document.getElementById('shrink'); 
 
    var img = document.getElementById('image'); 
 
    x.addEventListener("click", shrnk); 
 

 
    function shrnk() { 
 
     img.style.width = "50px"; 
 
     img.style.height = "25px"; 
 
    }; 
 
    </script> 
 
</body> 
 

 

 
</html>