javascript - cambiar el estilo de una clase

Question

He estado trabajando con jQuery por un tiempo, pero ahora quiero escribir algo en javascript puro y está resultando desafiante ... Uno de mis mayores problemas en este momento es que No he encontrado una manera de establecer/cambiar el estilo de una clase. Este no es un problema para los elementos con el ID, pero quiero cambiar el estilo de un grupo de elementos con la misma clase y no sólo para un elemento con un id .. En jQuery me acaba de escribir:

$('.someClass').css('color','red') 

¿Realmente no existe una equivalencia simple para esto en js puro?

Answer 1

intente lo siguiente

var all = document.getElementsByClassName('someClass'); 
for (var i = 0; i < all.length; i++) { 
    all[i].style.color = 'red'; 
} 

Nota: Como se señaló alegre getElementsByClassName no funcionará en IE. La cuestión vinculada tiene una buena manera de evitar esta limitación

• javascript document.getElementsByClassName compatibility with IE

Answer 2

Puede utilizar la biblioteca de selección, por ejemplo Arden: http://sizzlejs.com/ pero si quieres JS puras que te supongo que están atrapados con la obtención de todos los elementos, y luego mediante programación "a dedo" los que tienen clases a las que está interesado en el uso de expresiones regulares como este por ejemplo:

este es un equivalente de su oneliner JQuery:

for(i in document.all) document.all[i].className && /\bpost-text\b/g.test(document.all[i].className) && (document.all[i].style.color = "red") 

:)

Si no lo necesita en una sola línea puede hacer que sea más rápido (y mucho más legible):

var myClassName = "someClass"; 
var regexp = RegExp("\\b"+myClassName+"\\b/g"); 
var elements = document.all; 
for(i in elements){ 
    var this_element = elements[i]; 
    if(regexp.test(this_element.className){ 
    this_element.style.color = "red"; 
    } 
} 

Si "para (i en el objeto) "no funciona, solo use el ciclo clásico para" for (var i = 0; i < elementos.length; i ++)".

Podría ser 'embellecieron' un poco con el uso de algunos conceptos JS ligeramente más avanzados (correlaciones de funciones de matriz, plegado y tal), la versión JS estás codificación agains? I supongo que no es script ECMA 5, ¿verdad?

Además, echa un vistazo a esta pregunta/respuesta Get All Elements in an HTML document with a specific CSS Class

Answer 3

lo que se quiere cambiar es la hoja de estilo, supongo? eso es posible en Javascript, consulte

• Quirksmode: Change CSS
• Totally Pwn CSS with Javascript (in Internet Archive)
• Is the only way to change a style to do it per-element in JavaScript? (posible duplicado)

Me temo que no hay ninguna biblioteca para que, realmente me gustaría ver uno ...

Answer 4

Se puede utilizar:

document.getElementById("MyElement").className = "NewClass"; 

para cambiar la clase del elemento y luego simplemente definir el estilo de esa nueva clase en el archivo CSS

Answer 5

var all = document.getElementsByClassName('someClass'); 
for (var i = 0; i < all.length; i++) { 
    all[i].className += " red"; 
} 

Para un mejor estilo de codificación añadir otra clase a los elementos con el código de arriba y luego usar CSS para cambiar el color de todos los elementos como este:

.red { 
    color:red; 
}