Kann jQuery die CSS-Stildefinition ändern? (Nicht einzelne CSS jedes Elements)

Question

Ich habe keine Dokumente gesehen sagen jQuery jede CSS-Definition ändern können wie das Ändern

td { padding: 0.2em 1.2em } 

zu

td { padding: 0.32em 2em } 

aber entweder einen ganzen Stil ändern Blatt oder ändern Sie die Klasse jedes Elements, oder ändern Sie CSS von jedem Element.

Ist die Änderung der Stildefinition möglich?

Answer 1

Es gibt DOM-Zugriff auf Stylesheets, aber das ist eines dieser Dinge, die wir vermeiden möchten, weil IE eine Menge Kompatibilität benötigt.

Eine bessere Möglichkeit wäre typischerweise die Änderung indirekt auslösen, einen einfachen Klassenwechsel auf einem Vorfahren mit:

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

Jetzt nur $('body').addClass('changed') und die all td s Update.

Wenn Sie wirklich müssen die Stylesheets frob:

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

Dies setzt voraus, dass die td betreffende Regel im ersten Sheet die erste Regel ist. Wenn nicht, müssen Sie möglicherweise danach suchen, indem Sie die Regeln nach dem richtigen selectorText suchen. Oder einfach nur eine neue Regel am Ende hinzufügen, überschreibt die alten:

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

jQuery selbst nicht gibt Ihnen spezielle Werkzeuge, um Stylesheets zugreifen, aber es ist möglich, es gibt Plugins, die könnten.

Answer 2

Nein, es funktioniert einfach nicht auf diese Weise ... eine bessere Möglichkeit nicht sicher, dass es zu erklären, als dass :)

jQuery wurde entwickelt, um auf Elemente zu arbeiten ... wenn Sie dies tun, für Testen, Firebug der Chrome-Konsole sind jedoch Optionen.

Etwas, das man konnte tun, ist eine serverseitige erzeugt Sheet haben, zum Beispiel, wie ThemeRoller tut es, und jQuery (oder JS Vanille) fügt dynamisch, dass <link> in die Header, so etwas wie:

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

Wenn es der letzte Link war, würde es den zuvor definierten Stil überschreiben ... in der Tat ist dies genau wie ThemeRoller funktioniert.

Answer 3

Ich stieß auf ein Problem, wo ich nicht wusste, die Breite wollte ich eine Klasse, bis es geladen wurde und tat dies.

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

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

Hinweis: es kann Rolle, wo Sie das Skript setzen (prepend anhängen), je nachdem, wie Sie die Regeln zu ‚Kaskade‘ wollen.

Answer 4

$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>'); 

Ich habe ein ID-Attribut hinzugefügt, sodass Sie das Ziel auswählen und entfernen können, wenn Sie diese Änderung nicht mehr anwenden möchten.

$('#customCSS').remove();