¿Cómo crear dinámicamente una clase CSS en JavaScript y aplicar?

Daniela, miembro de este gran equipo de trabajo, nos ha hecho el favor de escribir esta sección ya que domina muy bien este tema.

Solución:

Aunque no estoy seguro de por qué desea crear clases CSS con JavaScript, aquí hay una opción:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass  color: #F00; ';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

Encontré una solución mejor, que funciona en todos los navegadores.

Utiliza document.styleSheet para agregar o reemplazar reglas. La respuesta aceptada es corta y práctica, pero esto también funciona en IE8 y menos.

function createCSSSelector (selector, style) 
  if (!document.styleSheets) return;
  if (document.getElementsByTagName('head').length == 0) return;

  var styleSheet,mediaType;

  if (document.styleSheets.length > 0) 
    for (var i = 0, l = document.styleSheets.length; i < l; i++) 
      if (document.styleSheets[i].disabled) 
        continue;
      var media = document.styleSheets[i].media;
      mediaType = typeof media;

      if (mediaType === 'string') 
      else if (mediaType=='object')  (media.mediaText.indexOf('screen') !== -1)) 
          styleSheet = document.styleSheets[i];
        
      

      if (typeof styleSheet !== 'undefined') 
        break;
    
  

  if (typeof styleSheet === 'undefined') 
    var styleSheetElement = document.createElement('style');
    styleSheetElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(styleSheetElement);

    for (i = 0; i < document.styleSheets.length; i++) 
      if (document.styleSheets[i].disabled) 
        continue;
      
      styleSheet = document.styleSheets[i];
    

    mediaType = typeof styleSheet.media;
  

  if (mediaType === 'string') 
    for (var i = 0, l = styleSheet.rules.length; i < l; i++) 
      if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) 
        styleSheet.rules[i].style.cssText = style;
        return;
      
    
    styleSheet.addRule(selector,style);
  
  else if (mediaType === 'object') 
    var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
    for (var i = 0; i < styleSheetLength; i++) 
      if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
        styleSheet.cssRules[i].style.cssText = style;
        return;
      
    
    styleSheet.insertRule(selector + '' + style + '', styleSheetLength);
  

La función se utiliza de la siguiente manera.

createCSSSelector('.mycssclass', 'display:none');

Respuesta corta, esto es compatible "en todos los navegadores" (específicamente, IE8/7):

function createClass(name,rules)
createClass('.whatever',"background-color: green;");

Y este bit final aplica la clase a un elemento:

function applyClass(name,element,doRemove)
    if(typeof element.valueOf() == "string")
        element = document.getElementById(element);
    
    if(!element) return;
    if(doRemove)
        element.className = element.className.replace(new RegExp("\b" + name + "\b","g"));
    else      
        element.className = element.className + " " + name;
    

Aquí también hay una pequeña página de prueba: https://gist.github.com/shadybones/9816763

Él key Un poco es el hecho de que los elementos de estilo tienen una propiedad "styleSheet"/"sheet" que puede usar para agregar/eliminar reglas.

valoraciones y reseñas

---

---

Utiliza Nuestro Buscador