javascript - span - innerhtml

Establecer la propiedad de estilo del elemento HTML en javascript

Question

Tengo un montón de viejas páginas ASP clásicas, muchas de las cuales muestran datos de la base de datos en tablas. Ninguna de las páginas tiene ninguna funcionalidad de clasificación integrada: está a merced de cualquier cláusula ORDER BY que el desarrollador original haya considerado adecuado usar.

Estoy trabajando en una solución rápida para virar en la clasificación a través del javascript del lado del cliente. Tengo un guión ya escrito que hace más de lo que necesito. Sin embargo, aún necesito agregar un poco de funcionalidad. Las filas de la tabla en estas páginas a menudo tendrán colores de filas alternados, y el mecanismo utilizado para lograr esto varía según las páginas. Puede ser tan simple como cambiar una clase de CSS o los estilos pueden haberse procesado en línea por el código ASP.

En este momento, después de ordenar la tabla, cada fila mantiene el esquema de coloración con el que se renderizó, por lo que las filas alternas ya no se alternan. Esperaba arreglarlo con algo simple como esto:

/* "table" is a var for the table element I''m sorting.
   I''ve already verified it exists, and that there are at least three rows.
   At this point the first row (index 0) is always the header row.
 */

// check for alternating row styles:
var RowStyle = table.rows[1].style;
var AltStyle = table.rows[2].style;

// SORT HAPPENS HERE!!
//  snip  

// Apply alternating row styles
if (RowStyle === AltStyle) return true; 
for (var i=1,il=table.rows.length;i<il;i+=1)
{
    if (i%2==0) table.rows[i].style=RowStyle;
    else table.rows[i].style=AltStyle;                 
}

Desafortunadamente, no puedes simplemente configurar las propiedades de estilo de un elemento como esta. Se queja de que el objeto no tiene setter. ¿De qué otra manera puedo hacer esto simplemente? No hay marcos como jQuery permitidos aquí, eso está fuera de mis manos.

Actualizar:
Si bien sería la mejor solución, no es práctico refaccionar más de 100 páginas para todas las clases de uso en lugar del estilo en línea. Además, a veces hay más cosas involucradas que solo el color de fondo. Por ejemplo, una fila puede ser mucho más oscura o más clara que la fila alterna, con un estilo que también tiene un color de primer plano diferente para adaptarse. O un estilo alternativo puede establecer bordes de manera diferente. Realmente no sé qué se usa en todas estas páginas, por lo que necesito algo que aplique genéricamente todos los estilos de una fila a otra.

Answer 1

Me gustaría señalar que generalmente es preferible cambiar la clase del nodo en lugar de su estilo y dejar que CSS maneje lo que eso significa.

Answer 2

No configure el objeto de estilo en sí mismo, establezca la propiedad de color de fondo del objeto de estilo que es una propiedad del elemento.

Y sí, a pesar de que dijiste que no, jquery y tablesorter con su plugin de zebra stripe pueden hacer todo esto por ti en 3 líneas de código.

Y solo establecer el atributo de clase sería mejor, ya que entonces tienes un control no codificado sobre el estilo que está más organizado

Answer 3

Para mí, esto funciona:

function transferAllStyles(elemFrom, elemTo)
{
  var prop;
  for (prop in elemFrom.style)
    if (typeof prop == "string")
      try { elemTo.style[prop] = elemFrom.style[prop]; }
      catch (ex) { /* don''t care */ }
}

Answer 4

Puede establecer el atributo de estilo de cualquier elemento ... el truco es que en IE tiene que hacerlo de manera diferente. ( error 245 )

//Standards base browsers
elem.setAttribute(''style'', styleString);

//Non Standards based IE browser
elem.style.setAttribute(''cssText'', styleString);

Tenga en cuenta que en IE8, en el modo de estándares, la primera forma funciona.

Answer 5

Puedes intentar agarrar cssText y className .

var css1 = table.rows[1].style.cssText;
var css2 = table.rows[2].style.cssText;
var class1 = table.rows[1].className;
var class2 = table.rows[2].className;

// sort

// loop
    if (i%2==0) {
        table.rows[i].style.cssText = css1;
        table.rows[i].className = class1;
    } else {
        table.rows[i].style.cssText = css2;
        table.rows[i].className = class2;
    }

Sin embargo, no del todo seguro acerca de la compatibilidad del navegador con cssText .

Answer 6

La "propiedad" del elemento DOM es una colección de solo lectura de todos los atributos de estilo definidos en el elemento. (La propiedad de la colección es de solo lectura, no necesariamente los elementos dentro de la colección).

Sería mejor utilizar la propiedad "className" en los elementos.

Answer 7

Si solo desea cambiar el color de la fila, puede acceder a la propiedad style.backgroundColor y configurarla.

Aquí hay un enlace rápido a una propiedad de CSS para la conversión de JS.