無法在我的img中使用javascript設置標題和alt屬性

我使用Google圖片搜索API，並在很大程度上覆制了此代碼，該代碼在我的頁面中生成搜索結果。無法在我的img中使用javascript設置標題和alt屬性

for (var i = 0; i < results.length; i++) { 
    // For each result write it's title and image to the screen 
    var result = results[i]; 
    var linkContainer = document.createElement('div'); 

    var title = document.createElement('div'); 
    // We use titleNoFormatting so that no HTML tags are left in the title 
    title.innerHTML = result.titleNoFormatting; 

    var newImg = document.createElement('img'); 

    newImg.src = result.tbUrl; 
    newImg.className = 'googleSearchResult'; 
    newImg.title = 'newTitle'; 
    newImg.alt = 'newAlt'; 

    var newLink = document.createElement('a'); 
    newLink.href = "temp_url";    

    newLink.appendChild(newImg); 
    contentDiv.appendChild(newLink); 
}

在下面的行，

newImg.src = result.tbUrl; 
newImg.className = 'googleSearchResult'; 
newImg.title = 'newTitle'; 
newImg.alt = 'newAlt';

前兩個，其設置圖像src和類，正常工作，但後兩個，其應設置圖像的標題和alt，根本不工作。任何人都可以看到爲什麼這會發生？謝謝閱讀。

編輯：下面是當通過Firebug的檢查Firefox中的HTML：

<img alt="" src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">

下面是HTML谷歌瀏覽器檢查時

<img alt src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">

編輯：我所試圖做的這裏是在圖像的HTML中存儲額外的一些數據，稍後將用於jQuery插件。如果任何人都可以建議一種替代方法來做到這一點，那也會很好。

來源

2010-07-28 ben

我刪除了我的答案，因爲它似乎沒有幫助。實際上，它並不完全正確，因爲DOM圖像元素的確具有屬性「alt」。對不起。 – 2010-07-28 11:31:53

不用擔心，謝謝Felix – ben 2010-07-28 11:35:02

不要在HTML文檔中使用'getAttribute' /'setAttribute'。它比普通屬性訪問方法的可讀性差，並且在IE中很多屬性都是錯誤的。 – bobince 2010-07-28 11:53:21

作爲對您上次編輯的迴應：如果您只是試圖存儲與圖像相關聯的數據供以後使用，則可以使用jQuery的data方法。

來源

2010-08-04 14:32:08

我懷疑問題在於別處。考慮this example，這在我測試過的瀏覽器（火狐，Chrome，IE）是行之有效的：

var link = document.createElement("a"); 
link.href = "http://stackoverflow.com"; 

var img = document.createElement("img"); 
img.title="Hello"; 
img.alt="alt Hello"; 
img.src="http://jsfiddle.net/img/sprites.png"; 
link.appendChild(img); 
document.body.appendChild(link); 

alert(img.getAttribute("alt")); 
alert(img.getAttribute("title"));

我會建議您檢查，看看是否有任何可能出現在鏈路/ img元素的前面，因爲這會停止出現在懸停上的工具提示。

來源

2010-07-28 11:31:58

感謝您的回答。我真的無法弄清楚我做錯了什麼。我正在檢查Firebug中的元素，它說alt =「」，並且根本沒有提及標題。 – ben 2010-07-28 11:59:36

@ben：在其他瀏覽器中是一樣的嗎？ Google Chrome有一個檢查員（Ctrl + Shift + I），IE有開發者工具（F12）。 – 2010-07-28 12:16:08

我編輯了原始問題以顯示Google Chrome檢查員的輸出 – ben 2010-08-02 06:33:33

嘗試：

img.setAttribute('title', 'someTitle');

Appearantly，有一個在DOM腳本之間的 '屬性' 和 '屬性' 的差異。

來源

2010-08-04 10:39:08 BGerrissen

無法在我的img中使用javascript設置標題和alt屬性

回答

相關問題