change - parent jquery

Crear una regla/clase CSS con jQuery en tiempo de ejecución

Question

Por lo general, tengo un archivo CSS que tiene la siguiente regla:

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

¿Cómo puedo evitar crear un archivo CSS tan estático agregando la información de CSS durante las acciones de tiempo de ejecución al cuerpo, o algo similar? (solo usando jQuery)

Quiero definirlo una vez pero con jQuery y usarlo muchas veces más tarde; es por eso que no quiero agregarlo cada vez a los elementos DOM específicos.

Conozco las características simples ( css("attr1", "value"); ), pero ¿cómo puedo crear una regla completa de CSS reutilizable?

Answer 1

¿Qué pasa si dinámicamente escribió una sección <script> en su página (con sus reglas dinámicas) y luego usó jQuerys .addClass (clase) para agregar esas reglas creadas dinámicamente?

No lo he intentado, solo ofrezco una teoría que podría funcionar.

Answer 2

Agregar reglas personalizadas es útil si crea un widget jQuery que requiere CSS personalizado (como la extensión del marco de CSS jQueryUI existente para su widget en particular). Esta solución se basa en la respuesta de Taras (la primera más arriba).

Suponiendo que su marcado HTML tiene un botón con un id de "addrule" y un div con un id de "target" que contiene algo de texto:

código jQuery:

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type=''text/css''> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

La ventaja de este enfoque es que puede reutilizar cssrules variables en su código para sumar o restar reglas a voluntad. Si cssrules está incrustado en un objeto persistente, como un widget jQuery, tiene una variable local persistente para trabajar.

Answer 3

Al usar .addClass () en jquery, podemos agregar estilos dinámicamente a los elementos en la página. p.ej. tenemos estilo

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

Ahora en el estado listo de jquery podemos agregar css como .addClass (myStyle)

Answer 4

Aquí hay un plugin de jquery que le permite inyectar CSS:

https://github.com/kajic/jquery-injectCSS

Ejemplo:

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

Answer 5

Aquí hay una configuración que da comando sobre los colores con este objeto json

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

esta función

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("/n"))
    )
}

para producir este elemento de estilo

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

Answer 6

Aquí tienes una función para obtener la definición completa de una clase CSS:

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '''';
};

Answer 7

En casos (inusuales) en los que desea poder cambiar estilos dinámicamente a menudo (por ejemplo, una aplicación de creación de temas), agregar etiquetas <style> o llamar a CSSStyleSheet.insertRule () dará como resultado una hoja de estilos en crecimiento, que puede tener un rendimiento y diseño implicaciones de depuración.

Mi enfoque solo permite una regla única por selector / conjunto de propiedades, eliminando cualquier existente al establecer cualquier regla. La API es simple y flexible:

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + '' { '' + rulename + '':'' + value + '';}'', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById(''my-styles'');
    if (!stylesheet) {
        stylesheet = $(''<style id="my-styles">'').appendTo(''head'')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

Uso:

addStyles(''body'', {
    ''background-color'': ''black'',
    color: ''green'',
    margin: ''auto''
});

clearStyle(''body'', ''background-color'');
addStyle(''body'', ''color'', ''#333'')

Answer 8

Esto no es nada nuevo en comparación con algunas de las otras respuestas, ya que utiliza el concepto descrito here y here , pero quería hacer uso de la declaración de estilo JSON:

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

Uso:

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

No estoy seguro si cubre todas las capacidades de CSS, pero hasta ahora me funciona. Si no es así, considérelo como un punto de partida para sus propias necesidades. :)

Answer 9

He estado jugando con algo de esto recientemente y he usado dos enfoques diferentes al programar un sitio de iPhone / iPod.

La primera forma en que me encontré al buscar cambios de orientación para que pueda ver si el teléfono es vertical u horizontal, esta es una forma muy estática pero simple e inteligente:

En CSS:

#content_right,
#content_normal{
 display:none;
}

En JS File:

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

En PHP / HTML (Importe primero su archivo JS y luego en la etiqueta del cuerpo):

<body onorientationchange="updateOrientation();">

Básicamente, esto elige un bloque de CSS de preconfiguración diferente para ejecutarse dependiendo del resultado obtenido desde el archivo JS.

También la forma más dinámica que prefería era una adición muy simple a una etiqueta de script o su archivo JS:

document.getelementbyid(id).style.backgroundColor = ''#ffffff'';

Esto funciona para la mayoría de los navegadores pero para IE es mejor quitarle municiones con algo más apretado:

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

O puede usar getElementByClass() y cambiar un rango de elementos.

¡Espero que esto ayude!

Ceniza.

Answer 10

Podrías hacer una clase css llamada algo así como .fixed-object que tiene todo tu CSS en él ...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

Luego, en jquery cada vez que quieras que algo tenga ese estilo solo agrega esa clase a él ...

$(#my-window).addClass(''fixed-object'');

Esa parece ser la forma más fácil de hacerlo, a menos que esté malinterpretando lo que necesita hacer.

Answer 11

Puede usar insertRule si no necesita soportar IE <9, de acuerdo con dottoro . También hay un código de navegador cruzado allí.

document.styleSheets[0].insertRule(''#my-window {/
    position: fixed;/
    z-index: 102;/
    display:none;/
    top:50%;/
    left:50%;/
}'', 0)

Answer 12

Puede usar el complemento cssRule . El código era simple entonces:

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

Uno de los comentarios hasta ahora preguntaba por qué uno querría hacer tal cosa. Por ejemplo, crear estilos para una lista donde cada elemento necesita un color de fondo diferente (por ejemplo, la lista de calendarios de GCal) donde el número de columnas no se conoce hasta el tiempo de ejecución.

Answer 13

Puede usar esta lib llamada cssobj

var result = cssobj({''#my-window'': {
  position: ''fixed'',
  zIndex: ''102'',
  display:''none'',
  top:''50%'',
  left:''50%''
}})

Siempre que pueda actualizar sus reglas de esta manera:

result.obj[''#my-window''].display = ''block''
result.update()

Luego tienes la regla modificada. jQuery no está lib haciendo esto.

Answer 14

Puedes crear un elemento de estilo e insertarlo en DOM

$("<style type=''text/css''> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

probado en Opera10 FF3.5 iE8 iE6

Answer 15

Si no desea codificar el CSS en un bloque / archivo CSS, puede usar jQuery para agregar CSS de forma dinámica a Elementos HTML, ID y Clases.

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID''s and Classes.
  $("body").css(body_tag_css);
});

Answer 16

Simplemente

$("<style>")
    .prop("type", "text/css")
    .html("/
    #my-window {/
        position: fixed;/
        z-index: 102;/
        display:none;/
        top:50%;/
        left:50%;/
    }")
    .appendTo("head");

¿Notó las barras invertidas? Se usan para unir cadenas que están en nuevas líneas. Salir de ellos genera un error.

Answer 17

Tal vez puede poner la información de estilo en una clase separada en su archivo CSS, por ejemplo:

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

y luego usa jQuery en el punto que elijas para agregar este nombre de clase al elemento?

Answer 18

Tenga en cuenta que jQuery().css() no cambia las reglas de la hoja de estilo, solo cambia el estilo de cada elemento coincidente.

En cambio, aquí hay una función de JavaScript que escribí para modificar las reglas de la hoja de estilo.

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + ''{'' + property + '':'' + value + '';}'', rules.length);
        }
    }

Ventajas:

• Los estilos se pueden calcular en una secuencia de comandos <head> antes de que se creen los elementos DOM y, por lo tanto, antes de la primera representación del documento, evitando una representación visualmente molesta, luego calcule y vuelva a procesar. Con jQuery, tendría que esperar a que se creen los elementos DOM, luego rediseñarlos y volverlos a renderizar.
• Los elementos que se agregan dinámicamente después del restyle tendrán automáticamente los nuevos estilos aplicados sin una llamada adicional a jQuery(newElement).css()

Advertencias:

• Lo he usado en Chrome e IE10. Creo que podría necesitar una pequeña modificación para que funcione bien en las versiones anteriores de IE. En particular, las versiones anteriores de IE pueden no tener s.cssRules definidas, por lo que recurrirán a las s.rules que tienen algunas peculiaridades, como el comportamiento extraño / con errores relacionado con los selectores delimitados por comas, como "body, p" . Si los evita, puede estar bien en las versiones anteriores de IE sin modificaciones, pero aún no lo he probado.
• Actualmente los selectores deben coincidir exactamente: use minúsculas y tenga cuidado con las listas delimitadas por comas; el orden debe coincidir y deben estar en el formato "first, second" es decir, el delimitador es una coma seguida de un carácter de espacio.
• Uno probablemente podría dedicarle un tiempo adicional tratando de detectar y manejar de manera inteligente los selectores superpuestos, como los de las listas delimitadas por comas.
• También se podría agregar soporte para consultas de medios y el modificador !important sin demasiados problemas.

Si desea realizar algunas mejoras en esta función, encontrará algunos documentos API útiles aquí: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Answer 19

Una respuesta floja a esto, pero el siguiente artículo puede ayudar: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Además, intenta escribir "modificar reglas CSS" en google

No estoy seguro de qué sucedería si intentara ajustar un document.styleSheets [0] con jQuery () aunque podría intentarlo

Answer 20

puedes aplicar css y un objeto. Para que pueda definir su objeto en su javascript de esta manera:

var my_css_class = { backgroundColor : ''blue'', color : ''#fff'' };

Y luego simplemente aplícalo a todos los elementos que quieras

$("#myelement").css(my_css_class);

Entonces es reutilizable ¿Para qué harías esto?

Answer 21

si no desea asignar una pantalla: ninguno a una clase css, el enfoque correcto para agregar estilo, jQuery.Rule hacer el trabajo.

En algunos casos, desea aplicar stiles antes del evento anexado de contenido ajax y contenido de fundido después de agregar y ¡esto es todo!