Estoy tratando de usar jQuery lo menos posible y me gustaría traducir algún código de jQuery a JS puro.

Tengo esto:

$(".myDiv").css({"width": 500});

¿Cuál es el equivalente JS puro del código anterior?

1
user8770372 30 oct. 2017 a las 11:47

4 respuestas

La mejor respuesta
var els = document.querySelectorAll('.myDiv');

// If you want to get elements using its class name
// var els = document.getElementsByClassName('myDiv');

for(var i = 0, length = els.length; i < length; i++) {
   els[i].style.width = '500px';
}

Al usar forEach:

var els = document.querySelectorAll('.myDiv');

els.forEach(function(el, ind) {
  el.style.width = '500px';
});

JS Fiddle

6
Harish Kommuri 1 nov. 2017 a las 10:20
document.querySelectorAll('.myDiv').forEach(function(elem) {
    elem.style.width = "500px";
})

querySelectorAll obtiene los elementos, luego itera sobre los elementos y establece el estilo para cada uno.

1
Shree 30 oct. 2017 a las 08:53

Hay algunas formas de lograr el mismo efecto, pero podría optar por algo como esto:

document.querySelectorAll('.myDiv').forEach(function(el) {
  el.style.width = '500px';
});

QuerySelectorAll selecciona todos los selectores CSS particulares como una colección de elementos DOM. forEach itera a través de la colección, pasando el elemento seleccionado actualmente a la función interna, que luego se estiliza con style.width.

2
delinear 30 oct. 2017 a las 08:51

Solo necesita usar document.getElementsByClassName() para obtener todos los elementos con esta clase y luego iterar sobre ellos y usar style.width para cambiar su ancho:

Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
  div.style.width = "500px";
});

Demostración:

Array.from(document.getElementsByClassName("myDiv")).forEach(function(div) {
  div.style.width = "100px";
});
.myDiv{
     background-color:yellow;
}
<div class="myDiv">A</div>

Nota:

Usamos Array.from() para tratar el resultado de { {X1}} como Array ya que se devuelve como Nodelist o un objeto tipo matriz y no tiene las propiedades Array y el Método .forEach en navegadores antiguos.

1
cнŝdk 30 oct. 2017 a las 09:56