Javascript：选择div内的图像元素

Javascript: select an image element inside a div

提问by Abhranil Das

I have a parent div gal1, inside which there can be further divs and content, but only oneimgelement without an idas you can see below. Now I want to use only Javascript (no jQuery) to change the style of this image, using gal1as argument (because the rest of the structure inside this div may vary, only this oneimage will always be there somewhere). I couldn't find any other stackoverflow question that addresses exactly my situation.

我有一个父 div gal1，其中可以有更多的 div 和内容，但只有一个没有 id 的img元素，如下所示。现在我想用只有JavaScript（无jQuery的）来改变这一形象的风格，采用gal1作为参数（因为此结构的DIV中的其余部分可能会有所不同，只有这一个形象将永远存在的地方）。我找不到任何其他完全解决我的情况的 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>

回答by Pranay Rana

Than you can make use of method called getElementsByTagName('img')than you should get image and update it.

比您可以使用调用的方法getElementsByTagName('img')比您应该获取图像并更新它。

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

回答by liunian

get the content by using id, and then query images by using getElementsByTagName

使用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];
}

回答by jerseyboy

Unless you absolutely need to pick the colors or border sizes dynamically, which I doubt because you are an admitted beginner, stuffing stylesheets in with Javascript is a Rube Goldberg device. It seems nifty to be able to do this, but if your application is important to you, you will regret it. (You might as well use innerHTML to stuff in a stylesheet in that case -- at least it will be faster than making DOM calls.)

除非您绝对需要动态选择颜色或边框大小，我怀疑这是因为您是公认的初学者，否则使用 Javascript 填充样式表是 Rube Goldberg 的设备。能够做到这一点似乎很不错，但如果您的申请对您很重要，您会后悔的。（在这种情况下，您也可以使用 innerHTML 来填充样式表——至少它比进行 DOM 调用要快。）

Pranay Rana's answer to use getElementsByTagName is the best option if your constraints are actually stable (only one img). Obtain an element reference el, to gal1, using getElementById, then var myimg = el.getElementsByTagName("img") and you are almost done.

如果您的约束实际上是稳定的（只有一个 img），那么 Pranay Rana 使用 getElementsByTagName 的答案是最好的选择。使用 getElementById 获取元素引用 el，到 gal1，然后 var myimg = el.getElementsByTagName("img") 就差不多完成了。

If you insist upon funking with the style nodes, you can stuff whatever properties you want into the style property of myimg. It becomes inline style.

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

Even so, you almost certainly do not need to stuff in novel rules, and changing inline style is often avoidable. It is more predictable and stable to modify the class attribute on myimg, and use a predefined set of style classes for the cases you need to handle. This will give a nice clean separation of the style from the script, and avoid both the in-lining of the style rules and run-time mutilation of the style tree by code injection.

即便如此，您几乎肯定不需要填充新规则，并且更改内联样式通常是可以避免的。修改myimg上的class属性更可预测和稳定，针对需要处理的情况使用预定义的样式类集。这将很好地将样式与脚本分离，并避免样式规则的内联和代码注入对样式树的运行时破坏。

回答by mrtsherman

You can insert CSS which may be more efficient if you have to do this in more than this single case.

如果您必须在不止一种情况下执行此操作，您可以插入 CSS，这可能会更有效。

http://jsfiddle.net/65Ggv/

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);