Comment puis-je modifier les règles de la classe css en utilisant jQuery?

Question

Pouvez quelqu'un m'aider s'il vous plaît, j'ai deux sections de ma question.

1. Ce que je veux faire, c'est changer les règles de classe CSS en utilisant jQuery en temps réel.

   .classname{color:red; font-size:14px;}

   Dans l'exemple ci-dessus, j'ai une classe nommée .classname maintenant en utilisant jQuery je veux changer la taille de la police seulement pas la couleur à l'intérieur de .classname sans ajouter de CSS en ligne.

2. Je veux créer et sauvegarder le changement de .classname dans un fichier en se rappelant qu'il y aura une feuille de style complète ou un certain nombre de noms de classe qui seront sauvegardés dans le fichier.

Comment puis-je faire ça de la manière la plus simple et la meilleure?

Merci!

Answer 1

À ma connaissance, il n'y a pas de moyen jQuery de le faire. Il pourrait y avoir un plugin jQuery pour cela mais je ne sais pas.

Essentiellement, ce que vous essayez d'accomplir dans votre première question est possible en utilisant la propriété styleSheets de l'objet document. C'est un peu plus compliqué que cela car vous devez parcourir une chaîne d'objets plutôt profonde, mais cela fonctionne néanmoins dans tous les principaux navigateurs, y compris Internet Explorer 6. Ci-dessous se trouve une preuve de concept. Le CSS est à l'intérieur d'une balise STYLE, mais fonctionne aussi bien avec un CSS externe. Je vous laisse faire les abstractions.

Preuve de concept

.classname {
 color: red;
 font-size: 14px;
}

window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}

Some red text

Make text green

Pour votre deuxième question, je n'ai pas le temps d'écrire une solution mais cela impliquerait de lire les déclarations CSS comme ci-dessus et d'utiliser la propriété cssText d'un objet CssRule afin de construire une chaîne qui sera éventuellement envoyée au serveur en utilisant une requête POST Ajax. Le côté serveur est de votre ressort.

Références:

• document.styleSheets (Mozilla)
• styleSheet object (Mozilla)
• CssRule object (Mozilla)
• document.styleSheets (MSDN)
• CssRule object (MSDN)

J'espère que cela vous aide

Answer 2

Récemment, j'ai eu besoin de corriger un problème de thème jquery pour le widget Autocomplete. Je voulais changer la couleur de fond du widget de saisie semi-automatique.

J'ai donc recherché le CSS et j'ai trouvé que la classe autocomplete est définie comme suit

.ui-autocomplete { position: absolute; cursor: default; }   

Alors dans mon programme, j'ai émis la déclaration suivante pour changer la classe en ajoutant la propriété de fond. Notez que je garde les autres attributs tels quels sinon cela cassera la fonctionnalité existante

$(" .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} ").appendTo("head");

Answer 3

Vous ne devriez adopter cette approche que si :

• Vous avez besoin de définir la valeur de quelque chose de peu pratique à énumérer (c'est-à-dire une largeur variable en pixels) avec des noms de classes
• Et vous voulez appliquer ce style à des éléments qui seront insérés dans le DOM à l'avenir

Il existe un plugin jQuery qui fait cela : http://plugins.jquery.com/project/jquerycssrule

Pour un petit projet sur lequel j'ai travaillé, j'ai extrait l'essentiel et créé la fonction suivante :

function addCSSRule(sel, prop, val) {
    for(var i = 0; i < document.styleSheets.length; i++){
        var ss    = document.styleSheets[i];
        var rules = (ss.cssRules || ss.rules);
        var lsel  = sel.toLowerCase();

        for(var i2 = 0, len = rules.length; i2 < len; i2++){
            if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
                if(val != null){
                    rules[i2].style[prop] = val;
                    return;
                }
                else{
                    if(ss.deleteRule){
                        ss.deleteRule(i2);
                    }
                    else if(ss.removeRule){
                        ss.removeRule(i2);
                    }
                    else{
                        rules[i2].style.cssText = '';
                    }
                }
            }
        }
    }

    var ss = document.styleSheets[0] || {};
    if(ss.insertRule) {
        var rules = (ss.cssRules || ss.rules);
        ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
    }
    else if(ss.addRule){
        ss.addRule(sel, prop + ':' + val + ';', 0);
    }
}

Answer 4

Si je comprends bien votre question, vous souhaitez parcourir un fichier CSS, apporter des modifications à une classe et ensuite conserver ces modifications en enregistrant le fichier ?

Vous ne pouvez pas le faire avec JavaScript/jQuery en cours d'exécution côté client; Vous pouvez certainement changer la taille de police de chaque élément individuel dans le DOM qui correspond à la classe CSS .nomclasse, comme ceci

$('.nomclasse').css('font-size','14px');

mais JavaScript côté client ne peut pas accéder au système de fichiers à partir du navigateur web, vous auriez donc besoin d'une autre manière (c'est-à-dire du code côté serveur) pour apporter des modifications au fichier CSS lui-même.

Answer 5

Vous pouvez également essayer JSS, cela a très bien fonctionné pour moi : https://github.com/Box9/jss

Téléchargez et incluez jss.js dans votre HTML :

Ajoutez une nouvelle règle (ou étendez une règle existante) :

jss('.special', {
    color: 'red',
    fontSize: '2em',
    padding: '10px'
});

Récupérez une règle existante :

jss('.special').get();

Renvoie :

{
    'color': 'red',
    'font-size': '2em',
    'padding-bottom': '10px',
    'padding-left': '10px',
    'padding-right': '10px',
    'padding-top': '10px'
}

Supprimez une règle existante :

jss('.special').remove();