1

我想用输入和按钮改变图像的大小。我有一个输入，我在其中插入所需的大小、一个图像和 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
}

它没有用。

4

4 回答 4

1

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

input.value = myImg.size.width

这条线意味着您已经获取了图像的宽度并将该值插入到您的输入中，这与您想要做的相反。您想获取输入中的值并将其注入到 imagesstyle.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
于 2019-12-29T05:58:22.557 回答
0

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

于 2019-12-29T06:00:35.473 回答
0

widthandheight属性返回附加的字符串，因此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';  
}
于 2019-12-29T06:07:27.060 回答
0

尝试这个

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>

于 2019-12-29T06:32:57.727 回答