Javascript：在div中選擇一個圖像元素

Question

我有一個父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>

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屬性更加可預測和穩定，並為需要處理的案例使用一組預定義的樣式類。 這樣可以很好地將樣式與腳本完全分離，並通過代碼注入避免樣式規則的內嵌和樣式樹的運行時毀壞。