如何从 Javascript 中的 id 获取图像的 url

Question

我知道这是初学者的事情。所以我将这张图片放在 div 中，id 为 thumb.

<img id="thumb" src="https://url-to-a-image">

而这个 Javascript 这是一个放大脚本：

<script type="text/javascript">
    var myImgSrc = document.getElementById("thumb").getElementsByTagName("img") 
[0].src;
    var evt = new Event(),
    m = new Magnifier(evt);
    m.attach({
        thumb: '#thumb',
        large: 'myImgSrc',
        largeWrapper: 'preview'
    });
</script>

如您所见，我正在尝试使用 myImgSrc 获取图像，然后我正在尝试使用大型图像：'myImgSrc'。当我将 a fixed url 放入 large: fixed-url-to-the-image 时，效果很好。

Answer 1

带有 #thumb id 的元素是标签 img 它自己，当前选择器不会 return src 值，所以它应该很简单：

var myImgSrc = document.getElementById("thumb").src;

Answer 2

你可以这样得到图像src，

var thumb = document.getElementById("thumb").src;

您不需要使用 getElementsByTagName。

Answer 3

let img = document.querySelector('#thumb');
console.log(img.src);

如果您使用 img.src，您将看到 img 标签的来源。

Answer 4

getElementsByTagName 是多余的 - 您已经有了您想要的确切元素 - 您通过它的 ID 选择了它。如果您想通过标签获取一个或多个元素并处理所有元素，而不是精确地识别一个元素，则只需要 getElementsByTagName。

所以其实解决方法很简单——直接获取ID-selected元素的src属性即可。工作演示：

var myImgSrc = document.getElementById("thumb").src;
console.log(myImgSrc);

<img id="thumb" src="https://url-to-a-image">

如何从 Javascript 中的 id 获取图像的 url

How to get a the url of an image from id in Javascript

javascript

magnifier.js