molily: getComputedStyle / getPropertyValue liefert Quotes

Beitrag lesen

body::after { content: 'foo'; }
Erwartet: foo
Ergebnis "foo"
Wo kommen die Double Quotes her, die das Ergebnis einschließen?

Wie kommst du zu dieser Erwartung?

Der Wert der Eigenschaft ist »"foo"«, nicht »foo«.

Also gibt getComputedStyle auch »"foo"« zurück.

Dass das nun double quotes und keine single quotes sind, das ist die übliche Normalisierung.

Mal ein Vergleich:

background-size: contain;
color: red;
width: auto;

Hier würdest du »contain«, »red«, »auto« zurückbekommen. Weil das Keywords sind.

content: "foo";

Hier bekommst du »"foo"« zurück. Weil das ein String ist. Das ist doch logisch, oder…?

content: "href: " attr(href);

Hier bekommst du »"href: " attr(href)« zurück. Weil eben das der Eigenschaftswert ist.

Anders herum würdest du (theoretisch) auch schreiben:

element.style.content = '"foo"';

(Das setzt glaube ich nur Opera um, aber es geht ums Prinzip.)

https://developer.mozilla.org/de/docs/DOM/window.getComputedStyle#Use_with_pseudo-elements

Da steht // returns ' rocks!'
Ergebnis wäre aber // returns '" rocks!"' sofern die Single Quotes hier zur Kennzeichnung des Werts sind.

Ja, das ist ein Fehler im Wiki.

Gibt einen String mit dem Inhalt »" rocks!"« zurück, wobei » und « hier von mir gewählte Delimiter sind.

Grüße,
Mathias