Question

我有一个父div gal1，其中可以有更多div和内容，但只有一个 img元素没有id 你可以在下面看到。现在我想只使用Javascript（ no jQuery ）来改变这个图像的样式，使用gal1作为参数（因为这个div中的其余结构可能会有所不同，只有这个< em>一个图像将永远存在于某处）。我找不到任何能够解决我的情况的其他stackoverflow问题。

<div class="gallery-preview" id="gal1">
    <div class="gallery-preview-img" id="gal-img1">
        <img src="galleries/kevin-carls/Monks.jpg">
    </div>
    <div class="gallery-preview-text" id="gal-text1">
        <span class="gallery-name" href="">Road to India</span><br/>
        <span class="artist-name" href="">Kevin Carls</span>
    </div>
</div>

Answer 1

您可以使用名为getElementsByTagName('img')的方法，而不是获取图像并更新它。

document.getElementById(gal1).getElementsByTagName('img');

Answer 2

使用id获取内容，然后使用getElementsByTagName

查询图像

function getImages(contentId) {
    var content = document.getElementById(contentId);
    // only one image, just return an item; or you can return an array
    if (content) return document.getElementsByTagName('img')[0];
}

Answer 3

如果您必须在超过这种情况下执行此操作，则可以插入更有效的CSS。

http://jsfiddle.net/65Ggv/

var style_rules = [];    
style_rules.push("#gal1 img { border: 3px solid green; } ");    
var style = style_rules.join("\n");

var el=document.createElement("style");
el.appendChild(document.createTextNode(style));
el.type="text/css";
document.head.appendChild(el);

Answer 4

除非您绝对需要动态选择颜色或边框尺寸，我怀疑这是因为您是初学者，使用Javascript填充样式表是Rube Goldberg设备。能够做到这一点似乎很有意义，但如果你的申请对你很重要，你会后悔的。（在这种情况下，您最好使用innerHTML填充样式表 - 至少它会比调用DOM更快。）

如果您的约束实际上是稳定的（只有一个img），Pranay Rana使用getElementsByTagName的答案是最佳选择。使用getElementById获取元素引用el到gal1，然后使用var myimg = el.getElementsByTagName（“img”），几乎完成了。

如果你坚持使用样式节点进行funking，你可以将你想要的任何属性填充到myimg的style属性中。它变成了内联风格。

即便如此，你几乎肯定不需要填写新的规则，改变内联风格通常是可以避免的。修改myimg上的class属性更加可预测和稳定，并为需要处理的案例使用一组预定义的样式类。这样可以很好地将样式与脚本完全分离，并通过代码注入避免样式规则的内嵌和样式树的运行时毁坏。

Javascript：在div中选择一个图像元素

4 个答案: