Comment créer dynamiquement CSS classe dans JavaScript et appliquer ?

Question

J'ai besoin de créer dynamiquement une classe de feuille de style CSS en JavaScript et de l'assigner à des éléments HTML comme - div, table, span, tr, etc et à des contrôles comme asp: Textbox, Dropdownlist et datalist.

C'est possible?

Ce serait bien avec un échantillon.

Answer 1

Bien que je ne sache pas pourquoi vous voulez créer des classes CSS avec JavaScript, voici une option:

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

Answer 2

Trouvé une meilleure solution, qui fonctionne sur tous les navigateurs.
Utilise document.feuille de style pour ajouter ou remplacer des règles. Accepté réponse est courte et maniable, mais cela fonctionne sur IE8 et moins trop.

function createCSSSelector(selector, style) {
    if(!document.styleSheets) {
        return;
    }

    if(document.getElementsByTagName("head").length == 0) {
        return;
    }

    var stylesheet;
    var mediaType;
    if(document.styleSheets.length > 0) {
        for( i = 0; i < document.styleSheets.length; 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];
        }

        var media = styleSheet.media;
        mediaType = typeof media;
    }

    if(mediaType == "string") {
        for( i = 0; i < styleSheet.rules.length; 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") {
        for( i = 0; i < styleSheet.cssRules.length; i++) {
            if(styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
                styleSheet.cssRules[i].style.cssText = style;
                return;
            }
        }

        styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
    }
}

La fonction est utilisée comme suit.

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

Noter que même si le nom de la fonction est createClass il crée en fait un sélecteur. Alors n'oubliez pas d'ajouter .(période) avant le nom de la classe. Pas besoin de mentionner que vous pouvez créer d'autres sélecteurs trop avec cette fonction.
Trouvé ici http://www.happycode.info/create-css-classes-with-javascript/

Answer 3

Réponse courte, ceci est compatible "sur tous les navigateurs" (en particulier, IE8 / 7):

 function createClass(name,rules){
    var style = document.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    if(!(style.sheet||{}).insertRule) 
        (style.styleSheet || style.sheet).addRule(name, rules);
    else
        style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");
 

Et ce dernier bit applique la classe à un élément:

 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;
    }
}
 

Voici aussi une petite page de test: https://gist.github.com/shadybones/9816763

L'élément clé est le fait que les éléments de style ont une propriété "styleSheet" / "sheet" que vous pouvez utiliser pour ajouter / supprimer des règles.

Answer 4

Il y a un léger plugin jQuery qui permet de générer des déclarations CSS: jQuery-injectionCSS

En fait, il utilise JSS (CSS décrit par JSON), mais il est assez facile à manipuler pour générer des feuilles de style CSS dynamiques.

 $.injectCSS({
    "#test": {
        height: 123
    }
});
 

Answer 5

YUI est de loin le meilleur de la feuille de style de l'utilitaire que j'ai vu là-bas. Je vous encourage à vérifier, mais voici un avant-goût:

// 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);

Il y a évidemment beaucoup d'autres moyens plus simples de l'évolution des styles à la volée tels que ceux suggérés ici. Si elles ont du sens pour votre problème, ils pourraient être meilleurs, mais il y a certainement des raisons pour lesquelles la modification de css est une meilleure solution. Le cas le plus évident, c'est quand vous avez besoin de modifier un grand nombre d'éléments. L'autre grande affaire est de savoir si vous avez besoin de vos changements de style d'impliquer la cascade. En utilisant le dom pour modifier un élément aura toujours une priorité plus élevée. Son approche de marteau de forgeron et est équivalent à l'utilisation de l'attribut style directement sur l'élément html. Ce n'est pas toujours l'effet désiré.