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.
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';
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');
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.