js 获取img的src|极客笔记

js 获取img的src

在开发网页项目中，经常会遇到需要获取图片的src路径的情况。在JavaScript中，我们可以通过几种方式来获取img元素的src属性。本文将详细介绍这几种方法，并附带示例代码和运行结果。

方法一：通过id获取img元素，再获取src属性

我们可以通过给img元素设置一个唯一的id，然后通过document.getElementById()方法来获取该元素，最终通过.src属性获取src值。下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get img src</title>
</head>
<body>
    <img src="https://via.placeholder.com/150" id="myImage">
    <script>
        const imgElement = document.getElementById('myImage');
        const srcValue = imgElement.src;
        console.log(srcValue);
    </script>
</body>
</html>

运行结果：控制台会输出https://via.placeholder.com/150，即img元素的src属性值。

方法二：通过选择器获取img元素，再获取src属性

除了通过id来获取img元素，我们也可以使用选择器来获取img元素，然后通过获取的元素对象的src属性来获取src值。下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get img src</title>
</head>
<body>
    <img src="https://via.placeholder.com/150" class="image">
    <script>
        const imgElement = document.querySelector('.image');
        const srcValue = imgElement.src;
        console.log(srcValue);
    </script>
</body>
</html>

运行结果：控制台同样会输出https://via.placeholder.com/150，即img元素的src属性值。

方法三：遍历所有img元素获取src属性

如果页面上有多个img元素，我们可以使用document.getElementsByTagName('img')方法获取所有img元素，然后遍历每个元素来获取它们的src属性。下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get img src</title>
</head>
<body>
    <img src="https://via.placeholder.com/150" class="image1">
    <img src="https://via.placeholder.com/200" class="image2">
    <img src="https://via.placeholder.com/250" class="image3">
    <script>
        const imgElements = document.getElementsByTagName('img');
        Array.from(imgElements).forEach((img) => {
            console.log(img.src);
        });
    </script>
</body>
</html>

运行结果：控制台会依次输出三个img元素的src属性值，即https://via.placeholder.com/150，https://via.placeholder.com/200，https://via.placeholder.com/250。

通过以上三种方法，我们可以轻松获取网页中img元素的src属性，从而实现对图片路径的操作。