Créer une règle / classe CSS avec jQuery au moment de l'exécution

Question

Habituellement, j'ai un fichier CSS qui a la règle suivante :

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

Comment puis-je éviter de créer un tel fichier CSS statique en ajoutant les informations CSS pendant les actions d'exécution au corps, ou quelque chose de similaire ? (en utilisant uniquement jQuery)

Je veux le définir une fois mais avec jQuery et l'utiliser plusieurs fois par la suite ; c'est pourquoi je ne veux pas l'ajouter à chaque fois aux éléments spécifiques du DOM.

Je connais les fonctions simples ( css("attr1", "value"); ), mais comment créer une règle CSS complète et réutilisable ?

Answer 1

Vous pouvez créer un élément de style et l'insérer dans le DOM.

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

testé sur Opera10 FF3.5 iE8 iE6

Answer 2

Tout simplement

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

Vous avez remarqué les entailles dans le dos ? Elles sont utilisées pour joindre des chaînes de caractères qui se trouvent sur de nouvelles lignes. Les omettre génère une erreur.

Answer 3

Vous pouvez appliquer du css à un objet. Donc vous pouvez définir votre objet dans votre javascript comme ceci :

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

Et ensuite, il suffit de l'appliquer à tous les éléments que vous voulez

$("#myelement").css(my_css_class);

Il est donc réutilisable. Mais dans quel but le feriez-vous ?

Answer 4

Voici un plugin jquery qui vous permet d'injecter du CSS :

https://github.com/kajic/jquery-injectCSS

Exemple :

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

Answer 5

Si vous ne voulez pas coder en dur le CSS dans un bloc/fichier CSS, vous pouvez utiliser jQuery pour ajouter dynamiquement le CSS aux éléments, ID et classes HTML.

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});