JS獲取img的src值詳解

一、從jQuery獲取img的src值

使用jQuery獲取img的src值非常方便，只需要使用選擇器選中img標籤，然後調用attr()方法即可獲取src屬性的值。下面是代碼示例：

// 選中img標籤
var img = $("img");

// 獲取src屬性的值
var src = img.attr("src");

上述代碼中，我們首先使用選擇器選中了頁面中的所有img標籤，然後通過調用attr()方法獲取了img標籤的src屬性的值。

二、使用純JS獲取img標籤的src

如果不想引入jQuery庫，也可以使用純JS代碼獲取img標籤的src屬性的值。下面是代碼示例：

// 選中img標籤
var img = document.getElementsByTagName("img")[0];

// 獲取src屬性的值
var src = img.getAttribute("src");

上述代碼中，我們使用了DOM方法getElementsByTagName()獲取了頁面中的所有img標籤，然後通過選取第一個img標籤並調用getAttribute()方法獲取了它的src屬性的值。

三、JS如何獲取img的src

如果我們需要獲取多個img標籤的src屬性的值，可以在純JS的基礎上稍作修改。下面是代碼示例：

// 選中所有img標籤
var imgs = document.getElementsByTagName("img");

// 循環獲取每個img標籤的src屬性的值
for (var i = 0; i < imgs.length; i++) {
  var src = imgs[i].getAttribute("src");
  console.log(src);
}

上述代碼中，我們使用了for循環來遍歷所有的img標籤，並通過getAttribute()方法獲取了每個img標籤的src屬性的值。

四、使用jQuery獲取img的src

除了使用純JS獲取img標籤的src屬性的值，我們還可以使用jQuery來完成相同的任務。下面是代碼示例：

// 選中所有img標籤
var imgs = $("img");

// 遍歷獲取每個img標籤的src屬性的值
imgs.each(function() {
  var src = $(this).attr("src");
  console.log(src);
});

上述代碼中，我們使用了jQuery的選擇器選中頁面中的所有img標籤，然後使用each()方法遍歷每個img標籤，並通過attr()方法獲取它的src屬性的值。

五、使用Vue獲取img的src

如果我們需要在Vue中獲取img標籤的src屬性的值，可以使用Vue的相關方法來實現。下面是代碼示例：

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/237572.html