class 找到未定义的 img src

Question

因此，我试图从中定义变量并将其放入初学者警报中的 img 源代码的 html 代码如下所示：

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

我正在尝试使用以下内容获取 img src

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

它returns

Undefined

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

Answer 1

获取document.getElementsByClassName() returns一个数组，尝试以下操作：

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

Answer 2

getElementsByClassName returns 一个数组。所以你需要像处理数组一样处理返回值。

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

Answer 3

你应该使用 document.getElementsByClassName('xxx')[0] 而不是

Answer 4

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

我们可以使用 querySelector 跳过该过程，这将 return 第一个找到的项目作为单个元素。

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

class 找到未定义的 img src

undefined img src found by class

javascript

image

src