Qual a diferença entre configurar o caminho de uma imagem em JavaScript usando por exemplo uma variável :
img.src="caminho"
E setando o atributo src, por exemplo:
img.setAttribute('src','caminho')
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePara atributos reconhecidos pela tag algo como exemplos:
Element.src
para tags <img>
, <video>
, <audio>
, <iframe>
Element.href
para tags <a>
, <link>
reconhecerá como atributo, mas em um elemento diferente cujo o atributo src
ou href
não forem próprios no navegador especifico, ou em CustomElements (se não for implementado de forma correta) setar .src
ou .href
(ou outro que não seja valido, o que mesmo seguindo as normas w3 pode variar em certos navegadores) serão setados como propriedade e não como atributo, por exemplo:
var teste = document.getElementById('teste');
teste.src = 'https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg';
console.log('getAttribute:', teste.getAttribute('src'));
<p id="teste">elemento p</p>
Veja que getAttribute('src')
retornou null
Agora veja quando o atributo é existente/valido para um elemento especifico:
var teste = document.getElementById('teste');
teste.src = 'https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg';
console.log('getAttribute:', teste.getAttribute('src'));
<img src="" id="teste">elemento p</p>
Veja que getAttribute('src')
retornou o endereço da imagem.
Ou seja, para setar atributos customizados ou atributos não padrão o caminho é setAttribute()
, mas se o atributo for "valido" no elemento pode usar o que chamaremos de atalhos, como .src
e .href
.
Por exemplo, alterar a propriedade de um estilo inline CSS com setAttribute
pode ser complicado, mas com a propriedade style facilita bastante, em um elemento:
<div style="background: #000; color: #fff; font-family: Arial;">
E no CSS fizer isto para alterar a cor para laranja:
Element.style.color = "#fc0";
Será muito mais simples que usar setAttribute('style', ...)
Sei que é um browser que ninguém mais usa, pelo menos não versões mais antigas que o IE10, a não ser que seja limitado a alguma situação, mas quero falar sobre o comportamento que o IE tinha, propriedades e atributos no IE6, 7 e 8 também se comportavam de forma igual, quero dizer, ao setar uma propriedade para um elemento ele se tornava um atributo, mesmo que não fosse uma propriedade valida ali
Veja o teste em emulação do IE8:
O código usado:
<div id="teste">DIV de teste</div>
<script type="text/javascript">
var teste = document.getElementById('teste');
teste.src = "https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg";
</script>
Já no IE9+ o comportamento foi "corrigido":
style
que é suportada por qualquer elemento, ela com certeza é mais simples de usar do que usar setAttribute e isso por si só é o suficiente para avaliar qual a mais pratica de usar.
20/10/2019 às 23:03