Question

我有两张图片：

<img id="img1" src="l1.jpg" usemap="#lb" height="400" border="0" width="300">
<img src="images.jpg" id="img2">

然后我有 JavaScript ：

function checkImg () {
    if (document.getElementById('img2').src=="images.jpg") 
    { 
        if (document.getElementById('img1').src=="l1.jpg")
        { 
            window.alert("hi");
        }
    } else { 
        window.alert("bye");
    }
}
checkImg();

还有一个激活它的按钮：

<button type="button" onclick="checkImg()">Click Me!</button>

两个图像都有脚本中指定的源，但它仍然会警告'bye'而不是'hi'。怎么了？

Answer 1

src属性返回绝对URL，如

<img src="image.jpg" id="element" />

<script>

    element.src; // http://stackoverflow.com/image.jpg

    element.getAttribute('src'); // image.jpg

</script>

换句话说，您必须使用getAttribute来获取src属性的值，而不是使用属性来获取绝对网址

function checkImg() {

    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2');

    if (img2.getAttribute('src') == "images.jpg") {

        if (img1.getAttribute('src') == "l1.jpg") {

            window.alert("hi");

        } else {

            window.alert("bye");
        }
    }
}

checkImg();

Answer 2

使用 hasattribute 函数进行比较，而不是使用 getattribute 函数。然后你的按钮就可以了。

<script>
        img1 = document.getElementById("img1");
        img2 = document.getElementById("img2");
        function checkimg() {
        if (img1.hasAttribute("src")=="img/1.jpg") {
            if (img2.hasAttribute("src")=="img/2.jpg"){
                alert("Hello");
            }
        }
        else {
            alert("Bye");
        }
        }
    </script>

图像源未被功能错误识别

2 个答案: