getComputedStyle / getPropertyValue liefert Quotes

[suit]

Siehe hier: http://jsfiddle.net/suit/syd3p/

Wenn ich mit JavaScript den Wert des generierten Inhalts Auslese, erhalte ich diesen nicht direkt sondern einen mit Double-Quotes rundherum - ich hab' allerdings keinen Plan warum.

Hintergrund dieser Aktion ist die derzeitige durch Media Queries ermittelte Viewportbreite an JavaScript weiterzugeben, um diese verwenden zu können - z.B. um auf bestimmte Dinge anders zu reagieren - etwa per Ajax nachgeladene Dinge die je nach Viewportgröße unterschiedlich ausfallen oder ggf. komplett fehlen.

Die Holzhammerlösung ist jetzt einfach sämtliche Zeichen zu ersetzen die keine Dezimalziffern sind, das funktioniert auch einwandfrei, selbst wenn man jetzt im CSS mal ein "px" dazuschreibt und mal nicht.

Dennoch interessiert mich, warum der Wert hier in Quotes eingeschlossen wird, obwohl anfangs gar keine gibt.

[molily]

Hallo,

warum der Wert hier in Quotes eingeschlossen wird, obwohl anfangs gar keine gibt.

Sorry, ich verstehe das nicht.

content: '960px';

Da sind Quotes, weil es ein String ist und keine Length, also hat der computed value auch Quotes.

width: 960px;

Das ist ein Length-Wert ohne Quotes, also liefert getComputedStyle ihn ohne Quotes.

So ganz verstehe ich das Problem nicht. Vielleicht stehe ich gerade auf dem Schlauch. ;)

Grüße,
Mathias

[suit]

So ganz verstehe ich das Problem nicht. Vielleicht stehe ich gerade auf dem Schlauch. ;)

Vermutlich - oder ich hab' die Sache nicht ausführlich genug beschrieben.

Auf das Wesentliche verkürzt:
alert(window.getComputedStyle(document.body,':after').getPropertyValue('content'));

Zuvor per CSS generierter Inhalt:
body::after { content: 'foo'; }
Erwartet: foo
Ergebnis "foo"

body::after { content: "foo"; }
Erwartet: foo
Ergebnis: "foo"

body::after { content: '"foo"'; }
Erwartet: "foo"
Ergebnis: ""foo""

body::after { content: "'foo'"; }
Erwartet: 'foo'
Ergebnis: "'foo'"

body::after { content: '\0066\006F\006F'; }
Erwartet: foo
Ergebnis: "foo"

Wo kommen die Double Quotes her, die das Ergebnis einschließen?

Das deckt sich übrigens auch nicht hiermit:
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.

Ergebnis in meinem Fall:
the generated content is: , " rocks!"

Wieder die Quotes da, obwohl die vorher nicht da waren:
http://jsfiddle.net/suit/CMSvG/

Firefox, Opera, IE, Chrome, Safari - überall dasselbe.

[molily]

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

[dave]

Hi,

content: "href: " attr(href);

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

http://jsfiddle.net/CMSvG/1/

Firefox und IE10 loggen wie von dir vorhergesagt:
the generated content is:
" rocks!" attr(foo)"

Chrome hingegen:
the generated content is:
' rocks!bar'

~dave

[suit]

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?

Weil der Eigenschaftswert »foo« ist und ' und ' die Begrenzer des Wertes sind.

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.

Kann ich absolut nachvollziehen und erklärt die Sache einwandfrei.

Das ist doch logisch, oder…?

Ansich ja - mir hat hier der Blick über den Tellerrand gefehlt, da ich hier ziemlich versteift auf die content-Eigenschaft fixiert war.

Ja, das ist ein Fehler im Wiki.

Damit wäre die Sache geklärt, warum mich das so verwirrt hat :)

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

Bleibt die Frage offen wie ich die Begrenzer sinnvollerweise entferne - kann ich davon ausgehen, dass diese _immer_ auf Double Quotes normalisiert werden oder ist das Browser-Sache? Sprich: wo kann ich Informationen dazu finden?

Im vorliegenden Fall ist es aber ziemlich egal weil ich sowieso nur Dezimalziffern brauche und alles andere bequem rausersetze.

Danke für die schlüssige Erklärung.

[molily]

Hallo!

kann ich davon ausgehen, dass diese _immer_ auf Double Quotes normalisiert werden oder ist das Browser-Sache? Sprich: wo kann ich Informationen dazu finden?

»"« und »'« sind die zulässigen Begrenzer. Welche der Browser nun wählt, ist natürlich ihm überlassen. Aber es dürfte es nicht schwer sein, beide zu entfernen.

val = parseInt(val.replace(/["']/g, ''), 10)

Grüße,
Mathias