5

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

更少的代码：

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);

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

4

3 回答 3

7

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

我不知道为什么其他浏览器会返回您定义的值，特别是考虑到在那些浏览器上.css()使用getComputedStyle()。如果他们正在实现 CSS2.1 content，那么他们违反了 CSS2.1，因为他们没有计算normal. 如果他们正在为后期的 CSS3 实现做准备，无论那可能是什么，那么他们以某种方式在实际元素上实现它是有道理的……无论哪种方式都让他们感到羞耻。

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

于 2013-08-27T16:22:11.360 回答
4

BoltClock 答案显示了我的问题的原因。我通过使用 font-family 而不是 content 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/ 。

于 2013-09-02T17:34:58.060 回答
0

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

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

于 2017-05-17T19:43:25.767 回答