Почему .prop ('src') возвращает неправильное значение, когда свойство src равно null или пустое?

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 Является DOMString, что отражает атрибут SRC HTML, содержащий полный URL изображения, включая базовый URI.

, который, очевидно, означает, что, без какого-либо пути, указанному в src, атрибут src будет равен только по ссылке base URI

: 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

Существует синхронизация между свойствами и атрибутами, но не для всех случаев. Например, «href» и «src» не синхронизированы. В вашем случае вы должны использовать

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

или getAttribute() при использовании ванильного JS. Вы можете узнать больше здесь ->http://javascript.info/tutorial/attributes-and-custom-properties

Answer 4

Это потому, что src отражается:

alt, src IDL атрибуты должны reflect соответствующее содержание атрибутов одного и того же имени.

И при получении отражающего атрибута IDL, который имеет значение URL, вы получите абсолютный один:

Если отражающий атрибут IDL является DOMString атрибутом, содержание которого атрибута определенно содержать URL , а затем на получение, то IDL атрибут должен resolve значения атрибута содержания относительно элемента и возвращает полученный absolute URL если это успешно, или пустая строка в противном случае

Если вы не хотите этого поведения, вы можете использовать getAttribute, чтобы получить атрибут content вместо IDL.