Question

我不像HTML那样熟悉Javascript编码。只想问一下，如何在此代码中重新调整图像大小？

<script type="text/javascript">
var image1 = new Image()
image1.src = "img/img1.jpg" 
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>

我已经使用此代码在HTML中进行了解决，但我不知道如何在Javascript中使用它：

<img src="img/www.png" alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >

非常感谢您的回复。

McJim

*对不起，这里是完整的代码：

<?php include('variables/variables.php'); ?>

<head>

<script type="text/javascript">

var image1 = new Image()
image1.src = "img/img1.jpg"
var image2 = new Image()
image2.src = "img/img2.jpg"
</script>

</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

这实际上是一个php文件，从另一个php文件调用。

Answer 1

这样做：

var image1 = new Image(250, 150);

所以它是new Image(width, height)

以下是一些文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement.Image?redirectlocale=en-US&redirectslug=Web%2FAPI%2FImage#Image_Element_constructor

反映OP添加的新代码的EDIT

问题是你没有将图像添加到DOM，即网页本身。 将脚本移动到正文正好在另一个脚本的上方，并将代码更改为：

var image1 = new Image(250, 150)
image1.src = "img/img1.jpg"
var image2 = new Image(350, 200)
image2.src = "img/img2.jpg"
var body = document.querySelector('body');
body.appendChild(image1);
body.appendChild(image2);

这是一个正常运作的JSBin示例：http://jsbin.com/AzAvunOm/1/edit?html,output

所以你的代码应该是这样的（你必须根据你的需要调整它）：

<?php include('variables/variables.php'); ?>

<head>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
    var image1 = new Image(250, 150)
    image1.src = "img/img1.jpg"
    var image2 = new Image(350, 200)
    image2.src = "img/img2.jpg"
    var body = document.querySelector('body');
    body.appendChild(image1);
    body.appendChild(image2);
</script>

<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

Answer 2

您可以按如下方式设置高度和宽度。

image1.width = 250;
image1.height = 150;

Answer 3

我想你需要这样的东西;

<!DOCTYPE html>
 <html>
 <body>

<script type="text/javascript">


 function changesize(){
   var  myid=document.getElementById('myimg');
   myid.with=300;
   myid.height=300;
  }

function changesize2(){
var  myid=document.getElementById('myimg');
myid.with=200;
myid.height=100;
}
</script>


<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe0LZa5KiYoWxGAC-_5gP2MoOuBx8QkCWLGeCuE01-0UPNrOVhrsTeNcvD" id='myimg' alt="Logo" width="250" height="150" style="position: absolute; top: 10px; left:60px;" >



<button type='submit' value='Btn1' name='Btn1' onclick="changesize()" >
<button type='submit' value='Btn2' name='Btn2'  onclick="changesize2()" >

</body>
</html>

在脚本jquery中调整图像大小

3 个答案: