Wie kann ich mit JavaScript oder jQuery auf CSS-Klassenstilattribute zugreifen?

Zugriff auf CSS-Klassenstilattribute mit JavaScript/jQuery

Beim Umgang mit CSS-Animationen kann es schwierig sein, auf die Stilattribute von Elementen zuzugreifen aus einer CSS-Klasse mit JavaScript oder jQuery. Es gibt jedoch effiziente Möglichkeiten, diese Attribute abzurufen.

Stilattribut mithilfe einer benutzerdefinierten Funktion abrufen

Ein Ansatz besteht darin, eine benutzerdefinierte JavaScript-Funktion zu erstellen, die die Stylesheets des Dokuments durchläuft auf der Suche nach dem passenden CSS-Selektor und -Stil. Hier ist eine Beispielfunktion:

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}

Um beispielsweise das Farbattribut der .highlight-Klasse abzurufen:

var color = getStyleRuleValue('color', '.highlight');

Hinweis: Diese Funktion geht davon aus, dass die Stylesheets werden inline definiert oder haben dieselbe Domäne wie das aktuelle Dokument.

Anwenden Animation

Mit dem abgerufenen Stilattribut können Sie es auf Ihre Animation anwenden:

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

Durch die Aktualisierung der CSS-Klasse von Rot auf Blau wird die Animation entsprechend angepasst und ausgerichtet mit dem aktualisierten CSS-Farbstil.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript oder jQuery auf CSS-Klassenstilattribute zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!