在僞選擇器之前訪問樣式屬性「內容」

我在頁面上有大約250個字體圖標，我想以編程方式提取每個圖標的Unicode值。在僞選擇器之前訪問樣式屬性「內容」

一個典型的圖標對應的CSS是這樣的：

.icon-play:before { 
    content: "\f04b"; 
}

我到目前爲止已經試過...

document.querySelectorAll('[class^=icon-]')訪問圖標（呼叫現在每一個i）。 i.style嘗試訪問樣式對象。問題是i.style.content值爲空。

我也嘗試以這種方式訪問內容document.querySelectorAll('[class^=icon-]:before')但這會產生一個空的結果。

任何幫助表示讚賞。謝謝。

來源

2013-04-24 Rick Viscomi

[操作CSS：使用jQuery之前和之後的僞元素]可能的重複（http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery ） – cimmanon 2013-04-24 15:31:49

「重複」顯然是關於操縱CSS的問題。這個問題是關於閱讀CSS的問題。他們可能有相同的答案，但是有兩個不同的問題。 – 2013-04-24 15:33:22

我相信psuedo-elements（'：hover'，'：before'等），因爲它們實際上不存在於DOM中，所以不能使用普通的選擇器查詢來選擇。我相信實現你所嘗試的唯一方法是通過閱讀樣式表本身而不是渲染頁面來訪問它。下面是一個解釋如何解決這個問題的答案：http://stackoverflow.com/a/5830517/188221 – DigTheDoug 2013-04-24 16:19:14

在這裏你去：

var is = document.querySelectorAll('[class^=icon-]'); 
[].forEach.call(is, function (i) { 
    console.log(
     window.getComputedStyle(i, ':before').content.slice(1, -1) // Strip off surrounding quotes 
    ); 
});

JSFiddle（以便顯示視覺效果增加了一些複雜性）

至於提取的Unicode值，你沒有指定你想要的格式（除非你只是想抓住字符串的內容），但是如果你需要代碼點，你可以將charCodeAt()應用到上面字符串的每個字符上，以找出它們的代碼點並按照你的意願去做。

來源

2014-03-08 01:28:45

在僞選擇器之前訪問樣式屬性「內容」

回答

相關問題