麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > JS獲取img的src值詳解

JS獲取img的src值詳解

來源:千鋒教育
發布人:xqq
時間: 2023-11-23 01:58:24 1700675904

一、從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的相關方法來實現。下面是代碼示例: