Question

我正在尝试使用JavaScript更改图片的大小。 jS文件与HTML页面分开。

我想在JS文件中设置图像的高度和宽度。这样做有什么好方法吗？

Answer 1

参考图像后，您可以设置其高度和宽度，如下所示：

var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
    yourImg.style.height = '100px';
    yourImg.style.width = '200px';
}

在html中，它看起来像这样：

<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>

Answer 2

您可以更改实际的宽度/高度属性，如下所示：

var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;

Answer 3

如果要在加载图片后调整图片大小，可以附加到onload标记的<img>事件。请注意，并非所有浏览器都支持它（Microsoft's reference声称它是HTML 4.0规范的一部分，但HTML 4.0 spec未列出onload的{{1}}事件）。

以下代码经过测试并正在使用：IE 6,7＆amp; 8，Firefox 2,3＆amp; 3.5，Opera 9＆amp; 10，Safari 3＆amp; 4和Google Chrome：

<img>

Answer 4

更改图像很简单，但如何在更改图像后将其更改回原始尺寸？您可以尝试将文档中的所有图像更改回原始大小：

var i,L=document.images.length;
for(i=0;i<L;++i){
 document.images[i].style.height = 'auto'; //setting CSS value
 document.images[i].style.width = 'auto'; //setting CSS value
// document.images[i].height = ''; (don't need this, would be setting img.attribute)
// document.images[i].width = ''; (don't need this, would be setting img.attribute)
}

Answer 5

you can see the result here 在这些简单的代码块中，您可以更改图像的大小，并在鼠标进入图像时使其更大，并且当它离开时它将恢复到原始大小。

<强> HTML：

<div>
<img  onmouseover="fifo()" onmouseleave="fifo()" src="your_image"   
       width="10%"  id="f" >
</div>

js文件：

var b=0;
function fifo() {
       if(b==0){
            document.getElementById("f").width = "300";
           b=1;
          }
       else
          {
         document.getElementById("f").width = "100";
          b=0;
        }
   }

Answer 6

您可以这样做：

.html文件：

<img src="src/to/your/img.jpg" id="yourImgId"/>

.js文件：

document.getElementById("yourImgId").style.height = "heightpx";

与宽度相同。

使用JavaScript更改图像大小

6 个答案: