javascript - 使用输入和按钮更改图像大小

Question

我想通过输入和按钮更改图像的大小。我有一个输入，我向其中插入所需的大小、一个图像和 2 个按钮。一种是根据输入更改图像大小(例如，如果用户在输入中键入 300，则图像的宽度和高度都将更改为 300px)。一个用于通过单击另一个按钮使图像大小本身加倍。

javascript:

var myImg = document.getElementById("myImg")
var input = document.getElementById("insert")

function increaseSize()
{
input.value = myImg.size.width
input.value = myImg.size.height

}

function doubleSize()
{
myImg.style.width * 2
myImg.style.height * 2
}

没用。

Answer 1

您的代码中有错误。我首先看到的是 increaseSize() 函数，您正在将值分配给输入，而不是图像。

input.value = myImg.size.width

这一行意味着您已经获取了图像的宽度并将该值插入到您的输入中，这与您想要做的相反。您想要获取输入中的值并将其注入(inject)到图像 style.width 属性中。所以对于初学者来说，改变那个函数(也没有 .size 属性，你想要 .style:

 // option 1 create within function

 function increaseSize() {

     var myImg = document.getElementById( "myImg" );

     myImg.style.width = input.value;

     myImg.style.height = input.value;

 }

  // option 2 pass as parameters

 var myImg = document.getElementById( "myImg" ); // assign the variables

 var input = document.getElementById( "size" );

 function increaseSize( img, input ) { // create the function

     img.style.width = input.value + 'px'; // assign a unit type to it, as it is a css value

     img.style.height = input.value + 'px';

 }

 increaseSize( myImg ); // run the function, passing in our variables