2

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')

1 Resposta 1

3

Para 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', ...)


Um pouco de história sobre o Internet Explorer

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:

internet explorer 8 ou inferior tratava propriedades como atributos

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":

IE9+ o comportamento das propriedades foi corrigido

5
  • Então no caso eu posso dar um setAttribute no elemento e criar o atributo que eu quiser? 20/10/2019 às 22:38
  • @IOOISISTEMAS exatamente, você pode criar atributos não padrões para o elemento especifico, mas se souber que o atributo é valido para o elemento "X", então pode usar o atalho "como propriedade" que facilitará a digitar, pois irá digitar menos :)
    – Syzoth
    20/10/2019 às 22:40
  • E a performance de um e de outro?
    – hugocsl
    20/10/2019 às 22:55
  • 1
    @hugocsl depende e depende, tem quem vá afirmar que propriedade para atributos conhecidos será mais rapido, e é provavel que será mesmo, fiz muitos testes de benchmark, tendo criado meu proprio jQuery com seletor proprio e uma série de funcionalidade e por isto posso lhe afirmar, cada motor de navegador tem um comportamento diferente mas tendo o resultado final igual, no entanto velocidade é algo que sempre varia e poderia até falar disto na resposta, mas não foi bem o que o autor perguntou [...]
    – Syzoth
    20/10/2019 às 23:03
  • @hugocsl [...] creio que o melhor caminho para quem for usar é notar que propeidades validas como atributos é mais fácil de digitar e desenvolver, principalmente se tratando da propriedade global 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.
    – Syzoth
    20/10/2019 às 23:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .