我可以通过JavaScript(getComputedStyle)在{content:'...'}字符串之前阅读:但这个字符串表现得很奇怪

Question

我有以下设置.我创建了一个<div>,通过伪选择器附加术语"之前",:before并通过使用读取该值getComputedStyle.

这是有效的,我得到的术语(在我的情况下是"之前")成功,它是"字符串"类型.(参见控制台输出.)

该字符串与给定字符串的比较将返回预期的true,但仅在Safari,CodePen和此处的"运行代码片段" - 环境中!

它不适用于Chrome,Firefox或IE.比赛的比较返回false.

可能是什么原因呢？

为什么这个简单的字符串比较不起作用？

代码的三个相关代码段如下所示:

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

我发现不同的浏览器对待getPropertyValue的方式content不同.有些浏览器会返回字符串中的字面引号,而其他浏览器则不会.

这是我用来测试不同浏览器行为的小提琴.结果如下:

                                 | 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

标记:

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

CSS:

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

JS:

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

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