web-dev-qa-db-fra.com

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

Quelqu'un peut-il 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 à la volée.

    .classname {color: red; taille de la police: 14px;}

    Dans l'exemple ci-dessus, j'ai une classe nommée .classname qui utilise maintenant jQuery. Je souhaite modifier la taille de la police, mais pas la couleur dans .classname, pas en ajoutant CSS inline.

  2. Je veux créer et enregistrer le changement .classname dans un fichier. N'oubliez pas qu'il y aura une feuille de style complète ou aucun nom de classe qui sera enregistré dans un fichier.

Comment puis-je faire cela le moyen le plus simple et le meilleur?

Merci!

jquerycss
52
Yasir

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

En gros, ce que vous essayez d’atteindre 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 marcher jusqu'à une chaîne d'objets assez profonde, mais fonctionne néanmoins dans tous les principaux navigateurs, y compris Internet Explorer 6. Vous trouverez ci-dessous une preuve de concept. Le CSS est à l'intérieur d'une balise STYLE, mais fonctionne tout aussi bien avec le CSS externe. Je vous laisse faire les abstractions.

Preuve de concept

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
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";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

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 finalement envoyée au serveur à l’aide de une demande Ajax POST. Le côté serveur est votre affaire.

Références:

J'espère que ça aide

54
Ionuț G. Stan

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

Alors j'ai regardé le CSS et trouvé que la classe autocomplete est définie comme ceci

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

Donc, dans mon programme, j'émets l'instruction suivante pour changer la classe en ajoutant la propriété background. Notez que je garde les autres attributs tels quels, sinon les fonctionnalités existantes seront brisées.

$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");
17
Nilesh

Vous ne devriez adopter cette approche que si:

  • Vous devez définir la valeur sur Quelque chose qui n’est pas pratique à énumérer (Avec une largeur variable en Pixels) avec des noms de classe
  • Et vous souhaitez appliquer ce style à des éléments qui seront insérés dans le DOM dans le futur .__

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);
    }
}
13
Blago

Si je comprends bien votre question, vous souhaitez lire un fichier CSS, apporter des modifications à une classe, puis les conserver en enregistrant le fichier?

Vous ne pouvez pas faire cela avec JavaScript/jQuery exécuté du côté client; Vous pouvez certainement modifier la taille de la police de chaque élément individuel du DOM correspondant à la classe CSS.classname, comme suit

$('.classname').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’un autre moyen (code de serveur, par exemple) pour modifier le fichier CSS lui-même.

12
Russ Cam

Vous pouvez également essayer JSS, cela a fonctionné à merveille pour moi: https://github.com/Box9/jss

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

<script type="text/javascript" src="jss.js"></script>

Ajouter une nouvelle règle (ou étendre une règle existante):

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

Récupérer la règle existante:

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

Résultats:

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

Supprimer la règle existante:

jss('.special').remove();
6
Vlad Sabev

le DOM niveau 2 permet de manipuler directement les règles css d'une feuille de style . ex: 

var ss = document.styleSheets[1];  // ref to the first stylesheet
ss.cssRules[0].style.backgroundColor="blue";  // modification of the 1rst rule

Il y a 2 interfaces: 

Cela permet d’activer/désactiver une feuille de style, de supprimer une règle, d’ajouter une règle etc ... Tous les détails ici dans MDM: Using_dynamic_styling_information

2
Benibur

Pour ce que vous cherchez, vous devez disposer de deux thèmes sur le serveur (theme1.css, theme2.css, theme3.css, etc.) et laisser l’utilisateur choisir le thème qu’il aime. Vous pouvez ensuite enregistrer dans la base de données avec le profil utilisateur le thème choisi par l'utilisateur (theme2.css). Lorsque l'utilisateur affiche ensuite sa page, vous incluez en haut de la page le theme2.css au lieu du thème default.css.

Cela fonctionnerait bien avec une technologie côté serveur telle que PHP ou ASP.NET ou ce que vous préférez. Bien sûr, vous pourriez potentiellement utiliser javascript pour enregistrer un cookie sur l’ordinateur de l’utilisateur afin de se souvenir de son choix et réutiliser javascript pour inclure le fichier dont vous vous êtes rappelé via le cookie.

Si vous souhaitez laisser l'utilisateur gérer exactement ce qui s'applique à des éléments spécifiques de la conception (tels que la couleur de l'en-tête, la police, etc.), vous pouvez à nouveau utiliser une technologie côté serveur (mieux, dans ce cas, à mon avis). ) ou javascript enregistrer des choses comme en-tête = bleu, font = Arial et en utilisant jQuery applique ce qui a été stocké sur votre page.

J'espère que cela vous donne un aperçu.

1
lpfavreau

Les styles appliqués à la section de tête se "surchargeant" les uns les autres, leur dernière append() avec les styles de tous les éléments pertinents sera utilisée, sauf si !important était impliqué auparavant.

La fonction utilisée pour attribuer le contenu css doit être text() et non html() pour éviter les injections accidentelles de code.

var dynamic_css = function(class_name){
  return '.' + class_name + ' {color:red; font-size:14px;}';
}
var styles = $('<style type="text/css">');
styles.text(dynamic_css('my_classname'));
$('html head').append(styles);

plus tard:

styles.remove();

il est également utile d'affecter une classe à l'élément styles pour l'identifier ultérieurement

0
Nei3maj6Xeerax7Anaedaezeequaeg

Vous pouvez utiliser YUI Stylesheet Utility.

http://yuilibrary.com/yui/docs/stylesheet/

Cela fonctionne à la grille! 

0
Roy Shoa

Pour la première partie, je spécifie généralement un bloc de style et l’activer/le désactiver avec jQuery Par exemple:

<style type="text/css" id="my-style" media="all">
    .classname{color:red; font-size:14px;}
</style>

Ensuite, vous pouvez passer en définissant l'attribut désactivé, tel que:

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);
0
Viliam

pas sûr de changer les propriétés de la classe Je suis venu ici pour chercher une réponse à cela moi-même et il semble y avoir déjà quelques réponses à cela, car pour économiser, vous pouvez utiliser la méthode jquery $ .post pour envoyer un formulaire contenant des modifications ou $ .get avec url valeurs encodées pour écrire ensuite dans le nouveau fichier CSS en utilisant PHP fwrite, ou file_put_contents. assurez-vous de limiter l'accès à cette fonctionnalité ou de vous assurer que les valeurs répondent à certains critères avant de stocker des données.

0
user511941

Sur une note semi-liée, consultez également ma réponse sur la modification des variables LESS, ce qui entraînera la mise à jour des règles CSS. En fonction de votre cas, cela peut être plus utile, car une seule variable LESS peut conduire à de nombreuses règles CSS .... https://stackoverflow.com/a/9491074/255961

0
studgeek