動態顯示圖像的URL與JavaScript

我使用標籤管理器動態地將信息從網站到使用自定義JavaScript的HTML元素。我現在的代碼是這樣的。 PS我無法弄清楚如何正確發佈。這實際上與動態顯示圖像的URL與JavaScript

function(){ 
    console.log("Start image variable"); 
    var element = document.getElementsByClassName("MagicZoomPlus")[0]; 
    console.log(element); 
    var image = element.getAttribute("img src").innerHTML; 
    console.log(image); 
    return image; 
}

這將返回以下調試信息

unreachable code after return statement[Learn More] trustlogo.js:28:123 
Start image variable gtm.js:1:42 
<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus" title="Franklin Paradigm Grey Sofa"> gtm.js:1:136 
undefined gtm.js:1:186

我試圖訪問網站上的HTML是

<a id="ZoomGallery" href="/uploads/products/892_3521-05 .jpg" class="MagicZoomPlus" title="Franklin Paradigm Grey Sofa"><img src="/uploads/products/892_3521-05 .jpg" alt="FranklinParadigm Grey Sofa" /></a>

來源

2017-03-22 Matty2Shoes

var元素不是圖像，而是鏈接。您可以像下面這樣獲取圖像：http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes，並從該節點獲取屬性。 –

這是我最後想出，其中工程。

function myFunc() { 
    var img = document.querySelector(".MagicZoomPlus img"); 

    return img.src 
}

來源

2017-03-29 19:17:00 Matty2Shoes

你.innerHTML（開始）不需要。 getAttribute（）函數只是返回一個帶有屬性值的字符串;如果該屬性不存在，則返回null。

爲了讓您元素的src，因此，您的圖像的URL，你必須做的：

var imageSrc = element.getAttribute("src");

，然後在mozilla developper network

來源

2017-03-22 14:41:13 jdereynal

好，所以當我嘗試使用新行時，它返回「null」我知道我失去了一些東西。 function（）{ var element = document.getElementsByClassName（「MagicZoomPlus」）[0]; var imageSrc = element.getAttribute（「src」）; return imageSrc; } – Matty2Shoes

您的標記沒有您正在查找的類名（Magic zoom plus）。當您想要選擇img標籤以獲取其src時，您在此選擇錨標籤。 – jdereynal

簡單 return imageSrc

更多信息

您可以使用選擇器，也可以直接使用點符號訪問屬性。如果你試圖對象的鏈接內的圖像：

function(){ 
    var image = document.querySelector(".MagicZoomPlus > img"); 
    // get 
    console.log(image.src); 
    // or set the image source 
    image.src = "https://example.com/hello.jpg"; 
    return image; 
}

來源

2017-03-22 15:13:27 Philippe

動態顯示圖像的URL與JavaScript

回答

相關問題