jQuery $（）。css（“content”）在IE9中返回字符串“normal”

Question

我正在使用CSS content屬性將一些值從我的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);

但這會在控制台上產生錯誤。

Answer 1

這是因為CSS2.1中定義的content不適用於元素，僅適用於:before和:after偽元素。 IE9只是遵循這里的CSS2.1規范，它要求元素的content始終被計算為normal 。

我不知道為什么其他瀏覽器會返回你定義的值，特別是考慮到.css() getComputedStyle()在這些瀏覽器上使用了getComputedStyle() 。 如果他們正在實現CSS2.1 content ，那么他們通過不將值計算為normal來違反CSS2.1。 如果他們正在准備一個晚期的CSS3實現，無論可能是什么，那么它們在某種程度上在實際元素上實現它是有道理的......無論如何都要羞辱它們。

這讓我想到另一點：如果你實際上並沒有嘗試使用CSS來修改元素的content ，那么就不要使用content ，即使它沒有定義用於元素的事實是你正在制作的原因首先使用這種技術。 您可以嘗試將這些顏色分配給某些類，創建隱藏元素並查詢該元素的顏色樣式。

Answer 2

BoltClock答案顯示了我的問題的原因。 我通過使用font-family而不是內容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/了解更多信息。

Answer 3

你可以使用replace(/["']/g, "")從字符串中刪除額外的引用

""string""將更改為"string"