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

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

Answer 2

您必须使用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;
}

<button id="go">Increase</button>
<div id="container">
    <div class="image"><img src="http://libcom.org/files/images/library/black-square.jpg"/></div>
</div>

Answer 3

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';  
}

Answer 4

尝试一下

function changeSize(){
    console.log('Clikced change size!');
    var size=parseInt(document.querySelector('#img_size').value);
    var img=document.querySelector('#img');
    img.width=size;
    img.height=size;
  }

function doubleSize(){
    console.log('Clikced double size!');
    var img=document.querySelector('#img');
    var size=parseInt(img.width)*2;
    img.width=size;
    img.height=size;
  }

<img src='http://placehold.it/120x120&text=image1' width='200px'   height="200px" id="img">
<input type="number" id='img_size' >
<button id="change_size" onclick="changeSize()"> Change Size</button>
<button id="double_size" onclick="doubleSize()">Double Size</button>

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

4 个答案: