El problema es que el estilo que intentas aplicar no es perceptible, si pruebas a cambiarle el color, verás que funciona. Nótese que si usas el punto y coma al final no funciona.
var element = document.getElementsByClassName("class-name");
element[0].style.color = "red"
var element1 = document.getElementById("id_name");
element1.style.color = "green"
<div class="class-name">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div>
<p id="id_name">Lorem ipsum dolor sit amet</p>
</div>
Otra posibilidad
En los navegadores modernos la selección se hace mucho más simple mediante el uso de querySelector
o querySelectorAll
.
Esto te permite seleccionar un elemento en particular o un grupo de elementos. Y permite selecciones complejas, basadas en combinaciones como la clase, el tipo de elemento, el id, la posición, etc...
El único problema es que no funciona en navegadores antiguos (ver tabla de compatibilidad según navegadores).
Aquí te dejo un pequeño ejemplo para abrir el apetito:
var element = document.querySelector(".class-name");
element.style.color = "red";
var elements = document.querySelectorAll(".class-name");
elements[1].style.color="blue" ;
<div class="class-name">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div>
<p id="id_name">Lorem ipsum dolor sit amet</p>
</div>
<div class="class-name">
<p>Lorem ipsum dolor sit amet</p>
</div>
element[0].style.color = "red"
, OJO, no uses;
– A. Cedano el 28 mar. 19 a las 19:52