¿Cómo puedo cambiar las reglas de la clase css usando jQuery?

¿Puede alguien ayudarme, tengo dos secciones de mi pregunta?

  1. Lo que quiero hacer es cambiar las reglas de la clase css usando jQuery sobre la marcha.

      .classname {color: rojo;  tamaño de letra: 14px;} 

    En el ejemplo anterior, tengo una clase llamada .classname ahora usa jQuery. Deseo cambiar el tamaño de la fuente, no solo el color, en .classname no añadiendo css inline.

  2. Quiero crear y guardar .classname cambiar a un archivo. Recuerde que habrá una hoja de estilo completa o no de nombres de clases que se guardarán en el archivo.

¿Cómo puedo hacer esto de la manera más fácil y mejor?

¡Gracias!

Por lo que sé, no hay una manera jQuery de hacer esto. Puede haber algún complemento jQuery para esto, pero no sé.

Básicamente, lo que intenta lograr en su primera pregunta es posible utilizando la propiedad styleSheets del objeto del document . Es un poco más complicado que eso, ya que necesita caminar hacia una cadena de objetos bastante profunda, pero sin embargo funciona en todos los navegadores principales, incluido Internet Explorer 6. A continuación hay una prueba de concepto. El CSS está dentro de una etiqueta STYLE, pero también funciona con CSS externo. Te dejaré hacer las abstracciones.

Prueba de concepto

            

Some red text

Para su segunda pregunta, no tengo tiempo para escribir una solución, pero implicaría leer las declaraciones de CSS justo como arriba y usar la propiedad cssText de un objeto CssRule para construir una cadena que eventualmente será enviada al servidor usando una solicitud AJAx POST. El lado del servidor es tu negocio.

Referencias

  • document.styleSheets (Mozilla)
  • Objeto styleSheet (Mozilla)
  • Objeto CssRule (Mozilla)
  • document.styleSheets (MSDN)
  • Objeto CssRule (MSDN)

Espero eso ayude

Recientemente tuve la necesidad de arreglar algún problema con el tema jquery para el widget Autocompletar. Quería cambiar el color de fondo del widget de autocompletar.

Así que busqué el CSS y encontré que la clase de autocompletar se define así

 .ui-autocomplete { position: absolute; cursor: default; } 

Entonces, en mi progtwig, publico la siguiente statement para cambiar la clase al agregar la propiedad de fondo. Tenga en cuenta que conservo los otros atributos tal como están, de lo contrario romperá la funcionalidad existente

 $("").appendTo("head"); 

Deberías tomar este enfoque solo si:

  • Necesita establecer el valor en algo que no es práctico enumerar (es decir, variando el ancho en píxeles) con nombres de clase
  • Y desea aplicar este estilo a los elementos que se insertarán en el DOM en el futuro

Hay un complemento jQuery que hace eso: http://plugins.jquery.com/project/jquerycssrule

Para un pequeño proyecto en el que trabajé extraje los elementos esenciales y creé la siguiente función:

 function addCSSRule(sel, prop, val) { for(var i = 0; i < document.styleSheets.length; i++){ var ss = document.styleSheets[i]; var rules = (ss.cssRules || ss.rules); var lsel = sel.toLowerCase(); for(var i2 = 0, len = rules.length; i2 < len; i2++){ if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){ if(val != null){ rules[i2].style[prop] = val; return; } else{ if(ss.deleteRule){ ss.deleteRule(i2); } else if(ss.removeRule){ ss.removeRule(i2); } else{ rules[i2].style.cssText = ''; } } } } } var ss = document.styleSheets[0] || {}; if(ss.insertRule) { var rules = (ss.cssRules || ss.rules); ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length); } else if(ss.addRule){ ss.addRule(sel, prop + ':' + val + ';', 0); } } 

Si entiendo su pregunta correctamente, ¿desea leer un archivo CSS, hacer cambios en una clase y luego conservar esos cambios guardando el archivo?

No puede hacer esto con JavaScript / jQuery ejecutándose desde el lado del cliente; Sin duda, puede cambiar el tamaño de fuente de cada elemento individual en el DOM que coincida con la clase CSS .classname , como

 $('.classname').css('font-size','14px'); 

pero el JavaScript del lado del cliente no puede acceder al sistema de archivos desde el navegador web, por lo que necesitaría otra forma (es decir, el código del lado del servidor) para realizar cambios en el archivo CSS.

También puedes probar JSS, funcionó maravillosamente para mí: https://github.com/Box9/jss

Descargue e incluya jss.js en su HTML:

  

Agregar nueva regla (o extender la regla existente):

 jss('.special', { color: 'red', fontSize: '2em', padding: '10px' }); 

Recuperar regla existente:

 jss('.special').get(); 

Devoluciones:

 { 'color': 'red', 'font-size': '2em', 'padding-bottom': '10px', 'padding-left': '10px', 'padding-right': '10px', 'padding-top': '10px' } 

Eliminar la regla existente:

 jss('.special').remove(); 

el DOM Nivel 2 permite manipular directamente las reglas CSS de una hoja de estilo. ex:

 var ss = document.styleSheets[1]; // ref to the first stylesheet ss.cssRules[0].style.backgroundColor="blue"; // modification of the 1rst rule 

Hay 2 interfaces:

  • CSSStyleSheet
  • hoja de estilo

Eso hace posible activar / desactivar una hoja de estilo, eliminar una regla, agregar una regla, etc. … Todos los detalles aquí en MDM: Using_dynamic_styling_information

Lo que estás buscando hacer se hace teniendo un par de temas en el servidor (theme1.css, theme2.css, theme3.css, etc.) y dejando que el usuario seleccione el tema que le gusta. A continuación, puede guardar en la base de datos con el perfil del usuario el tema que el usuario eligió (theme2.css). Cuando el usuario luego muestra su página, usted incluye en la parte superior de la página el theme2.css en lugar del tema default.css.

Esto funcionaría bien con la tecnología de servidor como PHP o ASP.NET o lo que quieras. Por supuesto, podría usar javascript para guardar una cookie en la computadora del usuario para recordar su elección y usar javascript nuevamente para incluir el archivo que recordó a través de la cookie.

Si desea que el usuario administre exactamente lo que se aplica a elementos específicos del diseño (como el color del encabezado, la fuente, etc.) podría hacerlo de nuevo, utilizando una tecnología de servidor (mejor en este caso, en mi opinión ) o javascript guarda cosas como header = blue, font = Arial y al usar jQuery aplica lo que estaba almacenado en tu página.

Espero que te dé una visión general.

En una nota semi relacionada, también vea mi respuesta sobre el cambio de variables LESS que dará como resultado reglas de CSS actualizadas. Dependiendo de su caso, puede ser más útil ya que una sola variable LESS puede manejar muchas reglas CSS. https://stackoverflow.com/a/9491074/255961

no estoy seguro acerca de cambiar las propiedades de la clase. Vine aquí buscando una respuesta para mí y parece que ya hay algunas respuestas para eso, en cuanto a guardar, podría usar el método jquery $ .post para enviar un formulario que contenga cambios o $ .get con valores codificados en url para luego escribir en el nuevo archivo CSS usando PHP fwrite, o file_put_contents. asegúrese de restringir el acceso a esta característica o asegurarse de que los valores cumplan con ciertos criterios antes de almacenar cualquier información.

Para la primera parte, generalmente especifico un bloque de estilo y lo enciendo / apago con jQuery. Por ejemplo:

  

Luego puede hacer la conmutación configurando el atributo deshabilitado, como por ejemplo:

 $('#my-style').prop('disabled', true); $('#my-style').prop('disabled', false); 

Puede usar la utilidad YUI Stylesheet Utility.

http://yuilibrary.com/yui/docs/stylesheet/

¡Funciona!

A medida que los estilos aplicados a la sección de encabezado se “sobrecarguen” entre sí, se utilizará su append() tardío append() con los estilos para todos los elementos relevantes, a menos que haya habido una !important implicación anterior.

La función utilizada para asignar el contenido css debe ser text() not html() para evitar inyecciones accidentales de código

 var dynamic_css = function(class_name){ return '.' + class_name + ' {color:red; font-size:14px;}'; } var styles = $(' 

luego:

 styles.remove(); 

también funciona bien para asignar una clase al elemento styles para identificarlo más tarde

Estoy bastante seguro de que no puedes cambiar las reglas dentro de un estilo existente. Incluso Firebug no te dejará hacer esto. Puede diseñar un elemento o conjunto de elementos, puede asignar y anular la asignación de clases, pero no creo que pueda modificar las clases existentes. Para hacer lo que estás pidiendo, necesitarás mantener algún tipo de arreglo asociativo que registre los cambios propuestos a las clases existentes y luego guardar esos cambios que necesitarás subir a un servidor que luego puede ofrecer un enlace para descargar al cliente. .

Utilicé el addClass de jquery: http://api.jquery.com/addClass/ y luego establecí la clase como los atributos que deseo cambiar.