Question

jsfiddle

$('img').click(function () {
  alert($(this).prop('src'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/tags/smiley.gif" />
<img src="" style="width: 10px; height: 10px; border: 1px solid;">

当我点击第二张图片时，它会提醒http://stacksnippets.net/js。

为什么？

Answer 1

根据官方文件：

HTMLImageElement.src 是一个反映src HTML属性的DOMString，包含图像的完整URL，包括基URI。

这显然意味着，在src没有任何路径的情况下，src属性只会等于base URI

link：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

快速的javascript解决方法是将src设置为null，如果它的值为空

var src = $(this).prop('src') || null;

jsfiddle：http://jsfiddle.net/g9d8e4wh/1/

关于您.attr() vs .prop()的问题，我建议您前往那里 .prop() vs .attr()

Answer 2

当SRC为空时，$（this）返回IMG对象，src返回对象上下文和baseURI。您可以通过在控制台中查看对象属性来查看它：

$('img').click(function () {
    alert($(this).prop('src'))
    console.log($(this));
})

Answer 3

那是因为src被反映出来了：

alt，src IDL属性必须reflect相同名称的相应内容属性。

当获得具有URL值的反射IDL属性时，您将得到绝对值：

如果反映IDL属性是其内容的DOMString属性属性被定义为包含URL，然后获取IDL 属性必须resolve内容属性的值相对于元素并返回结果absolute URL，如果是的话成功，否则为空字符串

如果您不想要此行为，可以使用getAttribute获取内容属性，而不是IDL。

Answer 4

属性和属性之间存在同步，但并非所有情况都存在同步。例如'href'和'src'不同步。在您的情况下，您需要使用

$('img').click(function () {
  alert($(this).attr('src'))
})

使用vanilla JS时

或getAttribute()。你可以在这里了解更多 - ＆gt; http://javascript.info/tutorial/attributes-and-custom-properties

为什么.prop（'src'）在属性src为null或为空时返回错误的值？

4 个答案: