的Javascript：選擇圖像元素的DIV

裏面我有一個父DIV gal1，在其內部可以有進一步的div和內容，但只有一個img元素沒有ID你可以看到下面。現在我只想使用Javascript（沒有jQuery）來改變這個圖像的樣式，使用gal1作爲參數（因爲這個div內部的其餘結構可能會有所不同，只有這個一個圖像將永遠存在某處）。我找不到任何其他可以解決我的情況的計算器問題。的Javascript：選擇圖像元素的DIV

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

來源

2012-01-16 Abhranil Das

深度的div中的img元素的ID爲gal1是已知的嗎？ – kinakuta 2012-01-16 07:08:26

假設它不知道會更好。 – 2012-01-16 07:09:22

比你可以使用的方法稱爲getElementsByTagName('img')比你應該得到的圖像並進行更新。

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

來源

2012-01-16 07:07:29

好的，我正在尋找這方面的一些信息。同時，你能否擴展你的答案，舉一個例子說明你將如何在我的案例中使用它？ – 2012-01-16 07:08:39

只要它在代表祖先gal1 div的節點上調用，就可以很好地工作。 NM - 我看到你的代碼片段就是這樣做的。 – kinakuta 2012-01-16 07:10:00

@Abhranil Das - 檢查答案已更新 – 2012-01-16 07:10:34

如果你不得不這樣做，那麼你可以插入更高效的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);

來源

2012-01-16 07:12:57 mrtsherman

在許多情況下，確實需要這樣做。你的解決方案聽起來不錯，但我仍然不熟悉網頁設計，所以我需要一些時間來解決它。 – 2012-01-16 07:54:51

好吧，明白了。很好的解決方案。 +1！ – 2012-01-16 07:57:48

獲得通過使用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]; 
}

來源

2012-01-16 07:13:40 liunian

相同的解決方案，但因爲您是新手，因此需要+1。 – 2012-01-16 08:12:17

查詢圖像，除非你絕對需要選擇顏色或邊界動態尺寸，我懷疑是因爲你是一個被認可的初學者，用JavaScript填充樣式表是一個Rube Goldberg設備。能做到這一點似乎很重要，但如果你的申請對你很重要，你會後悔的。（在這種情況下，您最好使用innerHTML填充樣式表 - 至少它會比DOM調用更快）。

如果您的約束實際上是穩定的，Pranay Rana的使用getElementsByTagName的答案是最好的選擇只有一個img）。使用getElementById獲取元素引用el，將其添加到gal1，然後var myimg = el.getElementsByTagName（「img」）即可完成。

如果您堅持使用風格節點進行加工，您可以將所需的任何屬性填充到myimg的樣式屬性中。它變成內聯樣式。即使如此，你幾乎可以肯定不需要用新穎的規則填充內容，而且改變內聯風格通常是可以避免的。修改myimg上的類屬性更具可預測性和穩定性，併爲需要處理的情況使用預定義的一組樣式類。這將給腳本提供一個很好的清晰風格分離，避免通過代碼注入來避免樣式規則的內聯和樣式樹的運行時殘缺。

來源

2012-01-16 15:19:56 jerseyboy

對於我的特定應用程序，我恐怕需要更改內聯樣式而不是類屬性。本質上我比較了img的高度和寬度。根據哪個更大，我可以將其設置爲高度值或寬度值，並讓其他比例值。 – 2012-01-16 16:09:01

CSS3有background-size：cover;和background-size：包含;這在這種情況下也是有用的。 – jerseyboy 2012-02-04 20:32:17

+1：雖然我不需要這個問題，但它會派上用場，用於我想在同一個項目上做的其他事情。 – 2012-02-05 07:01:35

的Javascript：選擇圖像元素的DIV

回答

相關問題