Peut jQuery changement de style css définition? (non individuelle css de chaque élément)

Je n'ai pas vu tous les docs en disant: jQuery pouvez modifier les CSS définition de telles que la modification de

td { padding: 0.2em 1.2em }

à 

td { padding: 0.32em 2em }

mais soit changer l'ensemble de la feuille de style, ou de changement de catégorie de chaque élément, ou de modifier le css de chaque élément.

Est en train de changer la définition de style possible?

InformationsquelleAutor | 2010-07-02
  1. 54

    Il est DOM l'accès aux feuilles de style, mais c'est une de ces choses que nous avons tendance à éviter, car IE a besoin d'un chargement de compatibilité de fichiers inutiles.

    Une meilleure façon serait généralement à déclencher le changement indirectement, à l'aide d'un simple changement de classe sur un ancêtre:

    td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }

    Maintenant juste $('body').addClass('changed') et tous les tds mise à jour.

    Si vous devez vraiment frob les feuilles de style:

    var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; //IE compatibility
rules[0].style.padding= '0.32em 2em';

    Cela suppose que le td la règle en question est la première règle dans la première feuille de style. Si non, vous pourriez avoir à aller à la recherche par itération les règles de la recherche pour le droit selectorText. Ou tout simplement ajouter une nouvelle règle à la fin, en substituant à l'ancien:

    if ('insertRule' in sheet)
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length);
else //IE compatibility
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length);

    de jQuery ne vous donne pas d'outils spéciaux pour l'accès des feuilles de style, mais il est possible, il y a des plugins qui pourraient.

    • Il est intéressant de noter que IE (incl. IE10) ne permet pas de conserver l'original selectorText. Quelque chose d'écrit comme .foo.bar dans la feuille de style CSS pourrait finir comme .bar.foo dans le DOM de la règle de l'objet. Cela fait de "chasser la droite du sélecteur de texte" extraordinairement fragile.
    • Droit - et en effet, il n'est pas nécessaire dans les specs pour selectorText pour contenir exactement la même chaîne que le sélecteur d'origine. C'est le même que innerHTML - l'analyseur convertit la source en un ensemble d'objets, puis la lecture de la propriété des résultats dans une sérialisation qui est la représentation textuelle reflétant les données que le navigateur utilise, mais une sérialisation qui n'est pas garanti d'être le même que la source. Par conséquent, la recherche exacte selectorText est intrinsèquement peu fiables.
    • La meilleure partie de cette réponse, c'est: "Une meilleure façon... le changement de classe sur un ancêtre"
    InformationsquelleAutor bobince
  2. 24
    $('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>');

    J'ai ajouté un attribut id de sorte que vous pouvez cibler et de le supprimer si vous ne souhaitez plus que le changement à appliquer.

    $('#customCSS').remove();
    InformationsquelleAutor Michael Fitchett
  3. 4

    Je suis tombé sur un problème dont je ne connais pas la largeur je voulais une classe jusqu'à ce qu'il était chargé et n'a de ce.

    <script>
$(function() {
    calcWidth = CalculateWidth();

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>');
}
</script>

    Remarque: il se peut importe où vous placez le script (préfixe, append) en fonction de la façon dont vous voulez que les règles de 'cascade'.

    InformationsquelleAutor Nick Sotiros
  4. 1

    Non, il ne fonctionne tout simplement pas de cette façon...pas sûr de la meilleure façon de l'expliquer que ça 🙂

    jQuery a été conçu pour travailler sur des éléments...si vous êtes en train de faire ce pour les tests, Firebug de la console Chromée sont les options si.

    Quelque chose que vous pourrait faire, c'est d'avoir un serveur-côté de la feuille de style générée, par exemple, comment ThemeRoller t-il, et jQuery (ou de la vanille JS) de manière dynamique ajoute que <link> dans votre en-tête, quelque chose comme:

    <link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />

    Si c'était le dernier lien, il faudrait remplacer le défini précédemment style en fait...c'est exactement comment ThemeRoller œuvres.

    InformationsquelleAutor Nick Craver