Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit JavaScript effizient CSS-Stilattribute aus Klassen abrufen?

Wie kann ich mit JavaScript effizient CSS-Stilattribute aus Klassen abrufen?

Linda Hamilton
Freigeben: 2024-12-11 09:05:19
Original
679 Leute haben es durchsucht

How Can I Efficiently Retrieve CSS Style Attributes from Classes Using JavaScript?

Stilattribute aus CSS-Klassen mithilfe von JavaScript/jQuery abrufen

Bei der Arbeit mit Stilanimationen in JavaScript kann es erforderlich sein, auf definierte Eigenschaften zuzugreifen in CSS-Klassen. Die Herausforderung entsteht, wenn die Animation basierend auf CSS-Änderungen dynamisch aktualisiert werden muss, um sicherzustellen, dass sie konsistent bleibt.

Ein Ansatz besteht darin, ein verstecktes Element zu verwenden, das der Ziel-CSS-Klasse zugewiesen ist, seine berechnete Farbe zu extrahieren und sie dann zu verwenden die Animation. Diese Methode gilt jedoch im Allgemeinen als ineffizient.

Eine robustere Lösung besteht darin, die mit dem Dokument verknüpften Stylesheets zu durchlaufen und nach dem spezifischen Selektor und der betreffenden Style-Eigenschaft zu suchen. Hier ist eine Implementierung einer Funktion, die diese Aufgabe ausführt:

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}
Nach dem Login kopieren

Beispielverwendung:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet
Nach dem Login kopieren

Diese Funktion basiert auf der Fähigkeit, eine durch Kommas getrennte Liste von Selektoren aufzuteilen und zu prüfen, ob Der angegebene Selektor ist Teil der Liste. Es unterstützt sowohl gruppierte Regeln als auch externe Stylesheets aus derselben Domäne.

Durch die Verwendung dieser Funktion können Sie Stilanimationen basierend auf Änderungen der CSS-Klasseneigenschaften dynamisch anpassen und so sicherstellen, dass Ihre Website oder Anwendung ästhetisch konsistent bleibt und auf den Benutzer reagiert Präferenzen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript effizient CSS-Stilattribute aus Klassen abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage