Question

我试图根据我在移动应用程序SoloLearn上学到的内容缩小图像。请帮忙。

<!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>

Answer 1

而不是使用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>

Answer 2

width和height样式不是数字，它们也需要单位，例如像素px。所以

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

您可以省略单位的唯一时间是将其设置为0，因为无论单位如何，都是相同的。

Answer 3

如果您想使用样式属性，则需要设置您正在谈论的数字的单位（即＆＃34; px＆＃34;）。

＆＃13;

<!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>

＆＃13;

使用javascript收缩img

3 个答案: