inline-style lassen sich ansprechen, <style> nicht

[Henry]

Hallo,

wenn ich CSS Angeben eines Elements abfragen möchte, zb. so:

<style>
.xy{background-color:red;}
</style>

<h2 class="xy">  
<button onclick="alert(document.querySelector('.xy').style.backgroundColor);">show test1</button>

dann kommt gar nichts, also alert() leer.

<h2 class="xy" style="background-color:orange;">

so aber schon. Warum?

Beispiel.

Nachtrag: Ich weiss natürlich, dass ich das umständlich mit getComputedStyle() auslesen könnte, das ist aber nicht die Frage.

Gruss
Henry

[dedlfix]

Tach!

Warum?

Weil es so definiert wurde. Wie sonst soll man programatisch auf die dem Element direkt gegebenen Style-Regeln zugreifen, ohne die anderswo definierten Regeln zu erhalten?

Wenn es stattdessen den gesamten berechneten Style enthalten sollte, wo sollen dann Änderungen an Regeln ausgeführt werden, die nicht im style-Attribut definiert wurde? Etwa am orginalen Ort, was Auswirkungen auf andere Elemente hat? Oder im Element? Aber warum ginge dann Lesen über das style-Attribut global und schreiben nur lokal?

Es ist schon sinnvoll, dass die style-Property eines Elements nur die Style-Regeln des Elements selbst enthält.

Nachtrag: Ich weiss natürlich, dass ich das umständlich mit getComputedStyle() auslesen könnte, das ist aber nicht die Frage.

Wenn die style-Property alles enthalten soll, wie umständlich soll es dann werden, nur die direkt gesetzten Regeln zu bekommen und wie inkonsistent soll es dann beim Schreiben werden?

Du solltest mal sehen, wie umständlich es war, an das aktuelle Aussehen eines Elements zu kommen, bevor getComputedStyle() erfunden wurde.

dedlfix.

[Henry]

Hallo dedlfix,

Wie sonst soll man programatisch auf die dem Element direkt gegebenen Style-Regeln zugreifen, ohne die anderswo definierten Regeln zu erhalten?

indem inline-styles Priorität haben?

Wenn es stattdessen den gesamten berechneten Style enthalten sollte, wo sollen dann Änderungen an Regeln ausgeführt werden, die nicht im style-Attribut definiert wurde? Etwa am orginalen Ort, was Auswirkungen auf andere Elemente hat? Oder im Element? Aber warum ginge dann Lesen über das style-Attribut global und schreiben nur lokal?

das verstehe ich nicht. Wie meinst du das?

Es ist schon sinnvoll, dass die style-Property eines Elements nur die Style-Regeln des Elements selbst enthält.

Mag bestimmt so sein. Das versuche ich ja gerade zu ergründen.

Du solltest mal sehen, wie umständlich es war, an das aktuelle Aussehen eines Elements zu kommen, bevor getComputedStyle() erfunden wurde.

Ja, aber das Problem bei getComputedStyle() ist, dass ich nicht wirklich das bekomme was im CSS geschrieben wurde, sondern die browserinterne Angabe, zb. anstatt Hex-Farbwert erhalte ich RGB.

Gruss
Henry

[dedlfix]

Tach!

Wie sonst soll man programatisch auf die dem Element direkt gegebenen Style-Regeln zugreifen, ohne die anderswo definierten Regeln zu erhalten?

indem inline-styles Priorität haben?

An dieser Stelle ging es mir um den Lesezugriff. Du willst ja geerbte und direkt gesetzte Eigenschaften miteinander vermischen. Wie unterscheidet/ermittelt man dann, aus welcher Quelle der Wert kommt? Eine Priorität hilft dabei nicht.

Bei Schreibzugriffen ist eine Priorität auch nutzlos. Das würde sonst bedeuten, dass die Eigenschaften verrangig im Element selbst landen, oder, wenn nicht dort zu finden, dann in der Quelle, aus der sie geerbt wurden. Das beeinflusst viel zu viel, und die browser-internen Quellen werden sich nicht einfach so überschreiben lassen. Ansonsten wüsste ich nicht, wie du dir eine Priorität beim Schreiben vorstellen würdest.

Ein Gemischtwarenladen, bei dem Lesezugriffe Werte inklusive Vererbung liefern, Schreibzugriffe aber nur lokal sind, ist inkonsistent. Und es hilft nicht, nur den Inhalt des Style-Attributs lesen zu können, wenn man die geerbten Werte nicht beachten möchte.

Wenn es stattdessen den gesamten berechneten Style enthalten sollte, wo sollen dann Änderungen an Regeln ausgeführt werden, die nicht im style-Attribut definiert wurde? Etwa am orginalen Ort, was Auswirkungen auf andere Elemente hat? Oder im Element? Aber warum ginge dann Lesen über das style-Attribut global und schreiben nur lokal?

das verstehe ich nicht. Wie meinst du das?

Lesezugriffe sollen nach deinem Wunsch geerbte Werte mit enthalten. Ich überlegte an der Stelle, wie Schreibzugriffe gehandhabt werden sollen.

Es ist schon sinnvoll, dass die style-Property eines Elements nur die Style-Regeln des Elements selbst enthält.

Mag bestimmt so sein. Das versuche ich ja gerade zu ergründen.

Du holst dir sonst eine zu hohe Komplexität ins Spiel. Die Eigenschaften eines Elements sollten nur die Werte des Elements selbst widerspiegeln.

Darüber hinaus gibt es auch noch die so genannten berechneten Eigenschaften - also zumindest in Sprachen, bei denen sich der Zugriffskapselungsmechanismus verstecken lässt (z.B. C#).

Im IE8 und davor gab es in Elementen mit currentStyle eine solche berechnete Eigenschaft, über das die letztlich berechneten Werte abfragbar waren.

Ja, aber das Problem bei getComputedStyle() ist, dass ich nicht wirklich das bekomme was im CSS geschrieben wurde, sondern die browserinterne Angabe, zb. anstatt Hex-Farbwert erhalte ich RGB.

Das will man dann meist nicht mehr unterscheiden. Wichtig ist oft nur, einersets die aktuellen Werte inklusive Vererbung lesen zu können und andererseits das, was im Element selbst definiert ist. Du hast da einen Spezialfall vorliegen, bei dem du nur die im Dokument gesetzten Werte ohne die browser-eigenen Defaults haben möchtest. Das würdest du aber auch nicht erreichen, wenn über style auch die geerbten Werte gelesen werden könnten. Die Eigenschaft wäre allgemein ziemlich unbrauchbar, wenn man mit ihr weder lediglich die direkt gesetzten Werte lesen könnte, noch die Werte, wie das Element aktuell aussieht (inklusive Browser-Stylesheets).

dedlfix.

[Der Martin]

Hallo,

aber das Problem bei getComputedStyle() ist, dass ich nicht wirklich das bekomme was im CSS geschrieben wurde, sondern die browserinterne Angabe, zb. anstatt Hex-Farbwert erhalte ich RGB.

das ist ja genau das, was der Name der Methode getComputedStyle() verspricht: Hey Browser, gib mir das, was du aus allen zureffenden CSS-Regeln letztendlich ermittelt hast. Dabei bekommst du eventuell auch Längenmaße in px, obwohl sie im Stylesheet in em angegeben wurden, oder normalisierte absolute Pfade von Hintergrundbildern anstatt der im Stylesheet notierten relativen Pfade. In der Entwickler-Konsole bekommst du übrigens einen Vorgeschmack darauf, was auch getComputedStyle() liefern würde.
Btw, der Hex-Farbwert ist doch eine Angabe in RGB (oder RGBA).

Live long and pros healthy,
 Martin