javascript Kann jQuery die CSS-Stildefinition ändern?(nicht einzelne CSS von jedem Element)




jquery toggle (4)

Ich habe noch keine Dokumente gesehen, in denen angegeben wurde, dass jQuery CSS-Definitionen ändern kann, z. B. das Ändern

td { padding: 0.2em 1.2em }

zu

td { padding: 0.32em 2em }

Sie müssen jedoch entweder ein gesamtes Stylesheet oder die Klasse jedes Elements oder die CSS jedes Elements ändern.

Ist eine Änderung der Stildefinition möglich?


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

Ich habe ein ID-Attribut hinzugefügt, damit Sie es als Ziel festlegen und entfernen können, wenn diese Änderung nicht mehr angewendet werden soll.

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

Es gibt DOM-Zugriff auf Stylesheets, aber dies ist eines der Dinge, die wir tendenziell vermeiden, da der IE eine Menge Kompatibilitäts-Cruft benötigt.

Ein besserer Weg wäre normalerweise, die Änderung indirekt auszulösen, indem eine einfache Klassenänderung für einen Vorfahren verwendet wird:

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

Jetzt nur noch $('body').addClass('changed') und alle td s $('body').addClass('changed') .

Wenn Sie die Stylesheets wirklich durchforsten müssen:

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 betreffende td Regel die erste Regel im ersten Stylesheet ist. Wenn nicht, müssen Sie möglicherweise danach suchen, indem Sie die Regeln durchlaufen und nach dem richtigen selectorText suchen. Oder fügen Sie einfach eine neue Regel zum Ende hinzu und überschreiben Sie die alte:

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 bietet Ihnen keine speziellen Tools für den Zugriff auf Stylesheets, aber es ist möglich, dass es Plugins gibt, die dies möglicherweise tun.


Ich stieß auf ein Problem, bei dem ich nicht wusste, wie breit eine Klasse sein sollte, bis sie geladen wurde und dies tat.

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

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

Hinweis: Es kann von Bedeutung sein, wo Sie das Skript platzieren (voranstellen, anhängen), je nachdem, wie die Regeln "kaskadieren" sollen.


Nein, es funktioniert einfach nicht so ... ich bin mir nicht sicher, wie ich es besser erklären kann :)

jQuery wurde entwickelt, um auf Elementen zu arbeiten ... Wenn Sie dies zum Testen tun, sind Firebug der Chrome-Konsole jedoch Optionen.

Sie könnten beispielsweise ein serverseitig generiertes Stylesheet ThemeRoller lassen, wie es ThemeRoller , und jQuery (oder Vanilla JS) fügt dieses <link> dynamisch in Ihren Header ein.

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

Wenn es der letzte Link wäre, würde er den zuvor definierten Stil überschreiben. Genau so funktioniert ThemeRoller.





stylesheet