Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: lnvisible en 17 Diciembre 2013, 18:31 PM

Título: ¿Cómo cambiar el CSS de una página?
Publicado por: lnvisible en 17 Diciembre 2013, 18:31 PM
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 $('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!!
Título: Re: ¿Cómo cambiar el CSS de una página?
Publicado por: raul338 en 17 Diciembre 2013, 18:57 PM
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
Título: Re: ¿Cómo cambiar el CSS de una página?
Publicado por: lnvisible en 17 Diciembre 2013, 19:38 PM
Son muchos elementos para cambiar el style de todos y cada uno.

Necesitaría una solución que sea más potente.
Título: Re: ¿Cómo cambiar el CSS de una página?
Publicado por: #!drvy en 17 Diciembre 2013, 21:11 PM
Asignales atributos únicos mediante js e identificarlos... luego haces con ellos lo que quieras.

Por ejemplo
Código (html4strict) [Seleccionar]
<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]
$(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;
});


(http://i.elhacker.net/i?i=h5mWgyXdINo-AJN80aNkimVo) (http://i.elhacker.net/d?i=h5mWgyXdINo-AJN80aNkimVo)

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

Saludos
Título: Re: ¿Cómo cambiar el CSS de una página?
Publicado por: alan++ en 18 Diciembre 2013, 22:11 PM
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
Título: Re: ¿Cómo cambiar el CSS de una página?
Publicado por: lnvisible en 20 Diciembre 2013, 12:02 PM
Al final lo he hecho así, primero genero los css en python:

Código (python) [Seleccionar]

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]
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.