Question

我是网站的新手，也是JavaScript的新手。我开始编写这个小的UserScript作为开始。基本上它的作用是，当你将鼠标指针悬停在缩略图上时，如果将该图片放大到弹出窗口。

我使用了Firebug并确定了包含图片网址的正确代码块。

<div id="profPhotos">
    <a class="profPhotoLink" href="photo.php?pid=6054657&uid=1291148517">
    <img width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg">
    </a>
<br>
</div>

我编写了以下代码来检索变量的URL。

var thumbURL = document.getElementById("profPhotos").getAttribute("src");

但是当我在Firebug控制台中运行那段代码只是为了检查它时，它会检索null。

我在这里做错了吗？非常感谢您的帮助。：）

Answer 1

profPhotos没有名为src的属性，你需要找到img然后才能检索到源代码。如果您为图像提供ID，则可以找到该ID并检索src URL。

Answer 2

<img id="profPhotos" width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg">

Answer 3

给img标签一个id

<img width="163" height="130" src="http://th0.max.ipstatic.net/thumbs/163x130/0e/e9/604x402_1291148517_6054657.jpg" id="imgPhoto"/>

然后为该Id调用getAttribute。

var thumbURL = document.getElementById("imgPhoto").getAttribute("src");

Answer 4

您没有显示悬停代码，但这是关键。我假设<div id="profPhotos">有多个图像，你想对每个图像的悬停采取行动吗？

此外，这可能是普通javascript和you'll want to use mouseenter versus mouseover, but it's not supported natively in Chrome的痛苦。

这两个问题的解决方案是use jQuery。

使用jQuery，这样的代码将为您提供图像src：

$('#profPhotos .profPhotoLink > img').bind (
    "mouseenter mouseleave", myImageHover
);

function myImageHover (zEvent) {

    if (zEvent.type == 'mouseenter') {
        console.log ('Entering src: ', this.src);
    }
    else {
        console.log ('Leaving src: ', this.src);
    }
}

使用该代码，您将看到记录到控制台的任何图像的src。

你可以see this code in action at jsFiddle。

要获得没有鼠标悬停位（或jQuery）的第一个图像的src，请使用：

var thumbURL = document.querySelector ('#profPhotos .profPhotoLink > img').src;

Answer 5

如果您无法修改代码，请使用：

var thumbURL = document.getElementById("profPhotos").getElementsByTagName('img')[0].src;

访问div，然后访问其中的唯一（第一个）图像。

如何在用户脚本中获取鼠标悬停时图像的src

5 个答案: