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

我想使用输入和按钮更改图像的大小。
我有一个输入，我要插入所需的大小，一个图像和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
}


没有用。

您的代码中有错误。我可以看到的第一件事是increaseSize（）函数，您正在将值分配给输入，而不是图像。

input.value = myImg.size.width

此行表示您已获取图像的宽度并将该值插入输入中，这与您要执行的操作相反。您想在输入中获取值并将其注入图像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

,

您必须使用style使用CSS来指定宽度和高度，请参见以下示例，在该示例中，我使用按钮来更改大小，您也可以在输入字段中进行操作：

document.getElementById("go").addEventListener("click",function() {
var img = document.querySelectorAll("#container .image img")[0];

img.style.height = "200px";
img.style.width = "200px";
});

div#container {
width: 100%;
height: 100%;
}
div.image img {
position:fixed;
width: 100px;
height: 100px;
}

Increase


width和height属性返回附加了px的字符串，因此删除px部分将其转换为数字并乘以2。

var myImg = document.getElementById("myImg")
var input = document.getElementById("insert")
function increaseSize() {
myImg.style.width = input.value + 'px';
myImg.style.height = input.value + 'px';
}
function doubleSize() {
myImg.style.width = Number(myImg.style.width.slice(0,-2)) * 2 + 'px';
myImg.style.height = Number(myImg.style.height.slice(0,-2)) * 2 + 'px';
}

,

尝试一下