Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tudo oK pessoal!? Desses script abaixo
// Exemplo 01:
elemento.style.color = "#0000FF";
elemento.style.border = "1px solid red";
elemento.width = "100px";
...// Exemplo 02
elemento.setAttribute("style", "color:#FF00FF");
elemento.setAttribute("border", "1px solid red");
elemento.setAttribute("width", "100px");
...1: Qual desses é a melhor maneira de se trabalhar na manipulação em javascript, "Exemplo 01" ou "Exemplo 02"?
2: Qual tem maior desempenho?
3: Qual é mais compatível em todos os navegadores?
4: Ou tanto faz usar um ou outro, não tem diferença de desempenho, compatibilidade de todos os navegadores e etc...
Achei interessante a questão.
Teoricamente eu já sabia que o Exemplo 01 executa de forma mais rápida* que o Exemplo 02.
*mais rápida numa fração imperceptível em milisegundos.
No Exemplo 01, a estilização é aplicada de forma direta ao elemento.
No Exemplo 02, primeiro ocorre a atribuição de estilização, após sua inclusão, é que ela é aplicada ao elemento.
Ou seja, no Exemplo 02 temos um passo a mais do no Exemplo 01.
Compatibilidade: Todos os navegadores agora seguem o padrão internacional do W3C, então, em navegadores atuais, deve funcionar ambas as formas.
Segue um teste prático bem simples que fiz abaixo:
Na maioria das vezes o Exemplo 01 será mais rápido, com pouquíssima diferença.
<!DOCTYPE html>
<html>
<head lang="PT-BR">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="texto" id="elemento" disabled>
</p>
<p><input type="button" value="Testar Velocidade de Estilização Direta" onclick="velocidadeEstilizacaoDireta();"> <input type="button" value="Testar Velocidade de Atribuição" onclick="velocidadeAtribuicao();"></p>
<br>
<p>Estilização Direta: <span id="tempo1"></span></p>
<br>
<p>Atribuição: <span id="tempo2"></span></p>
</body>
<script>
var t0;
var t1;//******************************************************************
function timer1(){
t0 = performance.now();
for(var i = 0; i < 100000; i++){
if(i % 2 == 0)
{
elemento.style.color = "#000FFF";
elemento.style.border = "1px solid red";
}
else
{
elemento.style.color = "#FFF000";
elemento.style.border = "1px solid black";
}
}
t1 = performance.now();
}//******************************************************************
function timer2(){
t0 = performance.now();
for(var i = 0; i < 100000; i++){
if(i % 2 == 0)
{
elemento.setAttribute("style", "color:#000FFF");
elemento.setAttribute("style", "border:1px solid red");
}
else
{
elemento.setAttribute("style", "color:#FFF000");
elemento.setAttribute("style", "border:1px solid black");
}
}
t1 = performance.now();
}//******************************************************************
function velocidadeEstilizacaoDireta()
{
timer1();
var tempo1 = (t1 - t0).toFixed(2);
document.getElementById("tempo1").innerHTML = tempo1 + " ms";
}
function velocidadeAtribuicao() timer2();
var tempo2 = (t1 - t0).toFixed(2);
document.getElementById("tempo2").innerHTML = tempo2 + " ms";
}
</script>
</html>Você também poderia utilizar classes CSS
>
Nenhum. você não deveria manipular o DOM, simplesmente isso.
Acesso ao DOM é lento, então evite, ambas as formas não são boas por isso. Mas a primeira é compatível com IEs antigos e a outra não
Nesse ponto, também concordo contigo William Bruno! Mas quando formos dá efeitos bem legais nos elementos, não tem saída teremos que usar a manipulação DOM, não concorda?
Exemplo: aumentar o tamanho do elemento com efeitos de movimentos e muitos outros efeitos.
Alan Walking bacana o script que você apresentou.
Mais ou menos @Israel Elias, ai basta por exemplo trocar classes:
$el.classList.add("font12");
$el.classList.add("font14");O que no caso do exemplo dado(manipulação de css), é sempre mais recomendado. Atribuir CSS em elementos DOM, em vez de usar classes CSS, é um anti-pattern.
Hoje em dia você também pode fazer animações com css:
Nenhum. Vc não deveria manipular o DOM, simplesmente isso.
Acesso ao DOM é lento, então evite, ambas as formas não são boas por isso. Mas a primeira é compatível com IEs antigos e a outra não