按类找到未定义的img src

时间:2018-07-07 15:11:45

标签: javascript image src

因此,我试图从中定义变量并将其放入启动器警报的img src的html代码如下所示:

serialVersionUIDs

我正在尝试通过以下方法获取img src

<img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">

返回

 var picture = document.getElementsByClassName("ProductItem-gallery-slides-item-image loaded").src;
 alert(picture);

我会提到img src位于ID随机的多个div中。

4 个答案:

答案 0 :(得分:2)

获取document.getElementsByClassName()返回一个数组,请尝试以下操作:

document.getElementsByClassName("ProductItem-gallery-slides-item-image loaded")[0].src;

工作示例:

var picture = document.getElementsByClassName("ProductItem-gallery-slides-item-image loaded")[0].src;
 alert(picture);
<img class="ProductItem-gallery-slides-item-image loaded" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">

答案 1 :(得分:1)

getElementsByClassName返回一个数组。 因此,您需要处理返回的值,因为您将处理数组。

document.getElementsByClassName("ProductItem-gallery-slides-item-image loaded")[0].src;

答案 2 :(得分:1)

您应该使用document.getElementsByClassName('xxx')[0]代替

答案 3 :(得分:1)

getElementsByClassName将返回一个元素数组,您需要对其进行循环或按索引获取该项目。

我们可以使用querySelector跳过该过程,它将返回找到的第一个项目作为单个元素。

let picture = document.querySelector('.ProductItem-gallery-slides-item-image').src
console.log(picture)
<img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">