JS获取img的src值|极客笔记

JS获取img的src值

在网页开发中，经常需要获取图片元素（<img>标签）的src属性值，以便进行一些操作，比如预览图片、加载图片等。本文将详细介绍如何使用JavaScript来获取图片元素的src属性值。

1. 使用getElementById方法

可以通过getElementById方法获取指定ID的图片元素，然后再获取其src属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Image Src</title>
</head>
<body>
<img id="myImg" src="example.jpg" alt="Example Image">
<script>
  // 获取图片元素
  var img = document.getElementById('myImg');
  // 获取图片元素的src属性值
  var imgSrc = img.src;
  console.log(imgSrc);
</script>
</body>
</html>

在上面的示例中，我们通过getElementById方法获取了ID为myImg的图片元素，并通过img.src获取了其src属性值。最后将src属性值输出到控制台中。

2. 使用querySelector方法

除了通过ID获取图片元素外，还可以使用querySelector方法通过选择器获取图片元素，然后再获取其src属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Image Src</title>
</head>
<body>
<img class="myImg" src="example.jpg" alt="Example Image">
<script>
  // 获取图片元素
  var img = document.querySelector('.myImg');
  // 获取图片元素的src属性值
  var imgSrc = img.src;
  console.log(imgSrc);
</script>
</body>
</html>

在上面的示例中，我们使用querySelector方法通过类选择器.myImg获取了图片元素，并通过img.src获取了其src属性值。

3. 遍历所有图片元素

如果页面中有多个图片元素，并且需要获取它们的src属性值，可以使用getElementsByTagName方法获取所有图片元素，然后遍历获取它们的src属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get All Image Src</title>
</head>
<body>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<script>
  // 获取所有图片元素
  var imgs = document.getElementsByTagName('img');
  // 遍历所有图片元素并输出src属性值
  for (var i = 0; i < imgs.length; i++) {
    var imgSrc = imgs[i].src;
    console.log(imgSrc);
  }
</script>
</body>
</html>

在上面的示例中，我们使用getElementsByTagName方法获取了所有图片元素，并通过遍历将它们的src属性值输出到控制台中。

4. 使用querySelectorAll方法

querySelectorAll方法可以通过选择器获取所有匹配的元素，同样可以用来获取所有图片元素的src属性值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get All Image Src</title>
</head>
<body>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<script>
  // 获取所有图片元素
  var imgs = document.querySelectorAll('img');
  // 遍历所有图片元素并输出src属性值
  imgs.forEach(function(img) {
    var imgSrc = img.src;
    console.log(imgSrc);
  });
</script>
</body>
</html>

在上面的示例中，我们使用querySelectorAll方法获取了所有图片元素，并通过forEach方法遍历将它们的src属性值输出到控制台中。

通过以上方法，我们可以方便地使用JavaScript获取图片元素的src属性值，进而进行各种操作。