jQuery$(）.css(“content”）返回字符串“”;正常的“;在IE9中

jQuery $().css("content") returning the string "normal" in IE9

本文关键字：IE9 返回 css content jQuery 字符串      更新时间：2023-09-26

我使用CSS content属性将LESS样式表中的一些值传递给JavaScript（使用画布元素中LESS中定义的一些颜色）。为了让我的生活更轻松，我决定以一种简单的方式将这些值放在JavaScript中解析。

LESS代码：

div#colorChart-critical {
   content:'@{critical-highest},@{critical-veryhigh},@{critical-high},@{critical-low},@{critical-medium},@{critical-verylow}';
}

当编译时会带来以下CSS:

div#colorChart-critical6 {
    content: '#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00';
}

然后我尝试使用jQuery:阅读它们

$("div#colorChart-critical").css("content").split(",");

问题是，在IE9中，由于某种原因，调用$("div#colorChart-critical").css("content")会返回字符串"normal"。Opera、Firefox、Safari和Chrome运行良好。

为什么IE9会出现这种情况？

在IE9上有关于这个问题的工作吗？如果没有任何其他CSS元素，我可以把随机文本放进去吗？

我可以使用类似的东西：

background: url(#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00);

但这会在控制台上产生错误。

这是因为CSS2.1中定义的content不适用于元素，只适用于:before和:after伪元素。IE9只是遵循CSS2.1规范，该规范要求元素上的content始终计算为normal。

我不知道为什么其他浏览器会返回您定义的值，特别是考虑到.css()在这些浏览器上使用getComputedStyle()。如果他们实现的是CSS2.1 content，那么他们没有计算normal的值就违反了CSS2.1。如果他们正在为后期的CSS3实现做准备，不管是什么，那么他们以某种方式在实际元素上实现它是有意义的。。。不管怎样，他们都很丢脸。

这让我想到了另一点：如果你实际上并没有试图使用CSS来修改元素的内容，就不要使用content，即使它没有被定义为与元素一起使用也是你首先使用这种技术的原因。您可以尝试将这些颜色分配给某些类，创建一个隐藏元素并查询该元素的颜色样式。

BoltClock答案显示了我的问题的原因。我找到了一个解决办法，使用字体家族而不是内容CSS属性。

我的LESS代码：

div#colorChart-maincolors {
    font-family: '@{colorChart1},@{colorChart2},@{colorChart3},@{colorChart4},@{colorChart5},@{colorChart6}';
}

哪个编译成CSS给出：

div#colorChart-maincolors {
  font-family: '#c0392b,#2980b9,#2ecc71,#f1c40f,#ecf0f1,#34495e';
}

可以使用获取字符串

removeQuotes= function(string) {
   return string.replace(/^['"]+|'s+|''|(;'s?})+|['"]$/g, '');
};
removeQuotes($("#colorChart-maincolors").css("font-family")); //add a .split(',') to get the colors as an array

函数removeQuotes是必要的，因为每个浏览器都会在getComputedStyle（以及扩展为jQuery.css（）方法）的返回中添加不同类型的引号。IE9添加了双引号，Webkit添加了单引号。

请参阅这篇关于CSS技巧的文章：http://css-tricks.com/making-sass-talk-to-javascript-with-json/了解更多信息。

您可以使用replace(/["']/g, "")从字符串中删除额外的引号

""string""将更改为"string"

相关文章：