Como criar dinamicamente a classe CSS em JavaScript e aplicar?

Preciso de criar dinamicamente uma classe de folhas de estilo CSS em JavaScript e atribuí-la a alguns elementos HTML como - div, table, span, tr, etc e a alguns controlos como asp:Textbox, Dropdownlist e datalist.

Será possível?

Seria bom com uma amostra.

Vishwanath
Pergunta editada :em
Programação
stylesheet javascript css
12º novembro 2009 в 6:35
Ainda sem vistas
Solução

Embora I'não tenho a certeza porque deseja criar classes CSS com JavaScript, aqui está uma opção:

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';
I.devries
Resposta editada :em
Comentários (15)

Encontrou uma solução melhor, que funciona em todos os navegadores. Utiliza document.styleSheet para adicionar ou substituir regras. A resposta aceite é curta e útil, mas isto funciona em todo o IE8 e menos também. 

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') {
        if (media === '' || (media.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }
      else if (mediaType=='object') {
        if (media.mediaText === '' || (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);
  }
}

A função é utilizada da seguinte forma. 

createCSSSelector('.mycssclass', 'display:none');
caseyjhol
Resposta editada :em
Comentários (13)

YUI tem de longe a melhor folha de estilo que já vi por aí. Encorajo-o a verificar, mas aqui's um gosto:

// style element or locally sourced link element
var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true));

sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local'));

// OR the id of a style element or locally sourced link element
sheet = YAHOO.util.StyleSheet('local');

// OR string of css text
var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +
          ".moduleX .warn  { background: #eec; } " +
          ".hide_messages .moduleX .alert, " +
          ".hide_messages .moduleX .warn { display: none; }";

sheet = new YAHOO.util.StyleSheet(css);

Existem obviamente outras formas muito mais simples de mudar de estilo, tais como as aqui sugeridas. Se fizerem sentido para o seu problema, podem ser as melhores, mas existem definitivamente razões pelas quais modificar o css é uma solução melhor. O caso mais óbvio é quando se precisa de modificar um grande número de elementos. O outro grande caso é se precisar de modificar o seu estilo para envolver a cascata. A utilização da dom para modificar um elemento terá sempre uma prioridade mais elevada. É a abordagem do martelo de forja e equivale a utilizar o atributo de estilo directamente no elemento html. Nem sempre é esse o efeito desejado.

Russell Leggett
Resposta editada :em
Comentários (0)