¿Cómo cambiar el CSS de una página?

[lnvisible]

Quiero añadir y quitar reglas de CSS de una página.

No quiero cambiar el estilo de un elemento concreto, tengo una tabla de dimensiones 100x1000 (eso hace 100000 elementos) y puedo ponerle clases como corresponde a todos ellos. Quiero poner reglas para que se muestren unos u otros, por ejemplo display:none, y luego poder quitarlas...

Todo lo que he encontrado es el

Código [Seleccionar] Expandir

$('td').css('display', 'none') de jQuery y eso lo que hace es cambiar el css de los elementos en el html, con el atributo style, no cambiar las reglas css.

¿cómo puedo hacer eso?

GRacias!!

[raul338]

En realidad no se puede cambiar las definiciones de las clases en CSS... solo en inline (atributo style)

Lo que puedes hacer es definir varias clases acorde a lo que necesites y despues juntarlas en los elementos con addClass/RemoveClass

[lnvisible]

Son muchos elementos para cambiar el style de todos y cada uno.

Necesitaría una solución que sea más potente.

[#!drvy]

Asignales atributos únicos mediante js e identificarlos... luego haces con ellos lo que quieras.

Por ejemplo

Código (html4strict) [Seleccionar] Expandir

<table>
   <tr class="trmanage">
      <td class="tdmanage">1</td>
      <td class="tdmanage">2</td>
      <td class="tdmanage">3</td>
      <td class="tdmanage">4</td>
   </tr>
   <tr class="trmanage">
      <td class="tdmanage">5</td>
      <td class="tdmanage">6</td>
      <td class="tdmanage">7</td>
      <td class="tdmanage">8</td>
   </tr>
</table>

Código (javascript) [Seleccionar] Expandir

$(function(){
   assignar('.tdmanage');
   var css = {'background':'#000','color':'#fff'};
   modificar('.tdmanage',0,4,css);
   modificar('.tdmanage',6,7,css);
});

var assignar = (function(selector){
   var i = 0;
   $(selector).each(function(){
      $(this).attr('row',i);
      ++i;
   });
   return true;
});


var modificar = (function(selector,from,to,css){
   for(i=from;i<to;++i){
      $(selector+'[row='+i+']').css(css);
   }
   return true;
});

Por supuesto que existirá algún plugin que se encargue mucho mejor de este asunto xD

Saludos

[alan++]

Si queres formularlo a realizar una accion vas a tener que tipo de "accion" va a activar el movimiento en jquery, por el resto si aclaras un poquito mas el efecto que queres o como queres hacerlo seria util

[lnvisible]

Al final lo he hecho así, primero genero los css en python:

Código (python) [Seleccionar] Expandir


def generateCSSs():
  for name in getNames():
    with open('files/csss/%s.css'%name,'w') as cssfile:
      cssfile.write('''.%s{
  display:none;       
}
'''%name)

Luego los modifico con esta función que llamo según los eventos que quiero que modifiquen las características de las clases que tengo definidas en cada tr y td.

Código (javascript) [Seleccionar] Expandir

function cssMod(show, val){
  if(show)
    $('#'+val).remove();
  else
    $('head').append('<link rel="stylesheet" type="text/css" href="files/csss/'+val+'.css" id="'+val+'" />');
}

Y ya está. GRacias a todos igual.