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

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

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

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!