Ich kann lesen: vor {content: '...'} string über JavaScript (getComputedStyle), aber diese Zeichenfolge verhält sich seltsam

Question

Ich habe die folgende Einrichtung. Ich erstelle eine <div>, füge den Begriff "vor" durch den Pseudo-Selektor :before an und lese diesen Wert mit getComputedStyle.

Dies funktioniert, ich bekomme den Begriff (der in meinem Fall ist "vor") erfolgreich, es ist vom Typ "String". (Siehe die Konsolenausgabe.)

Der Vergleich dieser Zeichenfolge mit einer bestimmten Zeichenfolge gibt die erwarteten true, aber nur in Safari, CodePen und hier, in dem „Run-Code-Snippet“ -Umgebung!

Es funktioniert nicht in Chrome, Firefox oder IE. Der Vergleich der Übereinstimmung gibt false zurück.

Was könnten die Gründe dafür sein?

Warum funktioniert dieser einfache String-Vergleich nicht?

Die drei relevanten Code-Schnipsel wie folgt aussehen:

var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); 
 
console.log('content: ' + content); // "before" 
 
console.log('typeof content: ' + typeof content); // string 
 
console.log(content == "before"); // false 
 
document.write(content == "before"); // false

div.pseudo:before { 
 
    content: "before"; 
 
    color: red; 
 
}

<div class="pseudo"> 
 
    Div with pseudo :before content. 
 
</div>

Answer 1

fand ich, dass verschiedene Browser getPropertyValue für content anders behandeln. Einige Browser geben literale Anführungszeichen in der Zeichenfolge zurück, andere nicht.

Hier ist die fiddle, die ich verwendet, um das Verhalten über verschiedene Browser zu testen.Die Ergebnisse unter:

 
           | before | "before" 
---------------------------------+--------+--------- 
Chrome 42.0.2311.135    | true | false 
Chrome Canary 44.0.2394.0  | false | true 
Firefox 37.0.2     | false | true 
Firefox Developer Edition 39.0a2 | false | true 
Internet Explorer 11.09   | false | true 
Safari 8.0.5      | true | false 
Opera 29.0.1795.47    | true | false 

Markup:

<div class="pseudo">Div with pseudo :before content.</div> 

Die CSS:

div.pseudo:before { 
    content:'before'; 
    color: red; 
} 

Die JS:

var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); 

console.log(content == "before"); 
console.log(content == '"before"'); 

Answer 2

var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); 
 
console.log('content: ' + content); // "before" 
 
console.log('typeof content: ' + typeof content); // string 
 
console.log(content == "before"); // false 
 
document.write(content == "before"); // false

div.pseudo:before { 
 
    content: "before"; 
 
    color: red; 
 
}

<div class="pseudo"> 
 
    Div with pseudo :before content. 
 
</div>

Firefox: content == '"' + 'text' + '"' gibt true zurück
Chrome: content == text re dreht sich wahre
Opera: content == text true zurück
Safari: content == text true zurück
IE: (ich nicht scheinen, um es in IE funktioniert)

Answer 3

Firefox hat " um den Text, ersetzen " mit '' , dh sie entfernen.

var content = window.getComputedStyle(document.querySelector('.pseudo'), '::before').getPropertyValue('content'); 
 
console.log('content: ' + content); // "before" 
 
console.log('typeof content: ' + typeof content); // string 
 
console.log(content == "before"); // false 
 
document.write(content.replace(/"/g, '') == "before"); // true

div.pseudo:before { 
 
    content: "before"; 
 
    color: red; 
 
}

<div class="pseudo"> 
 
    Div with pseudo :before content. 
 
</div>