我有以下设置。我创建了一个 <div>
, 通过伪选择器 :before
附加术语“before”并使用 getComputedStyle
读取该值.
这行得通,我成功地得到了术语(在我的例子中是“before”),它是“string”类型的。 (查看控制台输出。)
该字符串与给定字符串的比较返回预期的 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>
最佳答案
我发现不同的浏览器对 content
的 getPropertyValue
的处理方式不同。一些浏览器返回字符串中的文字引号,而另一些则不会。
这是 fiddle 我用来测试跨不同浏览器的行为。结果如下:
| 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>
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"');
关于javascript - 我可以读取 :before {content :'...' } string via JavaScript (getComputedStyle), 但此字符串的行为很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30100435/