javascript - 使用 javascript 我想更改特别是 div 标签的图像的大小

Question

在 HTML 文档中，很少有 id 为 DIV1、DIV2 的 div 标签在 DIV1 中有 2 个图像。在 DIV2 中只有一个图像。使用 javascript 我想将 DIV1 中的图像大小更改为 100px。如何指定该特定 div 标签中的图像？

Answer 1

假设那些是ids：

#div1 img {
    width: 100px;
]

或者，如果您愿意（出于某种原因，尽管您应该为此使用 CSS），您可以使用 JavaScript：

var div1Images document.getElementById('div1').getElementsByTagName('img');
for (var i = 0, len = div1Images; i < len; i++){
     div1Images[i].style.width = '100px';
}

我只设置一个维度 ( width) 的原因是，这样图像height将自动调整以适应保持自然纵横比。

Answer 2

document.querySelectorAll('.div1 img')

这将为您提供>`NodeList中所有img元素的对象（显然根据需要进行更改）。<div class=div您可以像普通数组一样对其进行迭代，并将元素宽度更新为您想要的任何内容.. 甚至是 100 像素！

Answer 3

如果你想使用 jQuery，它应该很简单：

$(document).ready(function () {  
 //select images and adjust height & width however you want, or use just width to scale proportionately  
   $('#div1 img').width('100px');
   $('#div1 img').height('100px');
});

这是一个 jfiddle 示例：http: //jsfiddle.net/t9pUL/4/

但是，我同意 David Thomas 的观点，除非您有真正的理由使用 javascript，否则您可能应该为此使用 css。