Creando una clase CSS en jQuery

Question

Creo que la función .addClass() en jQuery adjunta una clase CSS a la selección actual, pero me preguntaba si podría crear o definir una clase CSS en jQuery, y luego adjuntarlo

Answer 1

En realidad, puede crear una regla CSS que afectará a todos los elementos en la página actual. En la mayoría de los navegadores que debería ser tan simple como:

var style = $('<style>body { background: green; }</style>') 
$('html > head').append(style); 

Esto puede o no puede trabajar en IE, sin embargo se puede utilizar de IE propietaria addRule lugar:

document.styleSheets[0].addRule('body', 'background: green', -1); 

Naturalmente esto no va a ayudarle en la creación archivos css que se pueden compartir entre páginas web, pero es una forma práctica de afectar el estilo de una gran cantidad de elementos sin la necesidad de iterar sobre ellos.

Answer 2

No estoy exactamente seguro de lo que quiere, pero creo que lo mejor que puede hacer es algo como esto:

var someClass = { "width": "100%", "background": "#ffffff" }; 
$(this).css(someClass); 

Tenga en cuenta que esto no es en realidad la creación de una clase, pero podría hacer lo que necesitar.

Answer 3

Aquí hay algo que creará una clase CSS que estará disponible en todas partes y la aplicará a un objeto jQuery. Este sistema utiliza la misma técnica básica como se ha mencionado por MooGoo sino que está materializado en una pieza totalmente funcional de código:

(function() { 
    var addRule; 

    if (typeof document.styleSheets != "undefined" && document.styleSheets) { 
     addRule = function(selector, rule) { 
      var styleSheets = document.styleSheets, styleSheet; 
      if (styleSheets && styleSheets.length) { 
       styleSheet = styleSheets[styleSheets.length - 1]; 
       if (styleSheet.addRule) { 
        styleSheet.addRule(selector, rule) 
       } else if (typeof styleSheet.cssText == "string") { 
        styleSheet.cssText = selector + " {" + rule + "}"; 
       } else if (styleSheet.insertRule && styleSheet.cssRules) { 
        styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length); 
       } 
      } 
     } 
    } else { 
     addRule = function(selector, rule, el, doc) { 
      el.appendChild(doc.createTextNode(selector + " {" + rule + "}")); 
     }; 
    } 

    var createCssClass = function(className, cssProps, doc) { 
     doc = doc || document; 

     var head = doc.getElementsByTagName("head")[0]; 
     if (head && addRule) { 
      var selector = "*." + className; 
      var ruleBits = []; 
      for (var i in cssProps) { 
       if (cssProps.hasOwnProperty(i)) { 
        ruleBits.push(i + ":" + cssProps[i] + ";"); 
       } 
      } 
      var rule = ruleBits.join(""); 
      var styleEl = doc.createElement("style"); 
      styleEl.type = "text/css"; 
      styleEl.media = "screen"; 
      head.appendChild(styleEl); 
      addRule(selector, rule, styleEl, doc); 
      styleEl = null; 
     } 
    }; 

    jQuery.fn.createAndApplyCssClass = function(className, cssProps) { 
     createCssClass(className, cssProps, document); 
     this.addClass(className); 
    }; 
})(); 

$("#someelement").createAndApplyCssClass("test", { 
    "background-color": "green", 
    "color" : "white" 
}); 

Answer 4

Con jQuery.Rule puede escribir código como este para anexar una nueva regla CSS:

$.rule('#content ul{ border:1px solid green }').appendTo('style'); 

Prolongación de una regla:

$.rule('#content ul', 'style').append('background:#FF9'); 

Extracción de toda la regla:

$.rule('#content ul', 'style').remove(); 

No hay más en el API docs.

Internamente, utiliza el truco "append stylesheet to head" que MooGoo mentioned as well.