是否有任何技術可以通過CSS規則將任意文本傳遞給JavaScript？

是否有任何CSS屬性可以使用JavaScript創建自定義增強功能的元數據超載？還是有一些其他技術/黑客可以用來從CSS到JavaScript的任意字符串？是否有任何技術可以通過CSS規則將任意文本傳遞給JavaScript？

的具體使用情況是這樣的：

用戶提交的CSS被用來主題靜態標記。
JavaScript層可以選擇性地啓用增強嵌入式內容（例如圖形或其他可視化），用戶應該能夠以各種方式對此標記進行樣式設置。
示例：選擇要合併的特定數據點，選擇將要呈現的圖表線條/條的類型，以某種形狀創建可視化對象。

這將需要適用於所有現代瀏覽器和IE9及以上版本。 我也想避免避免引入複雜性的增加可能的話少於

2014-01-09 Chris Lukic

是如何進行可視化

/* js */ function getConfig(variableName) { // search backwards because the last match is more likely the right one for (var s= document.styleSheets.length - 1; s >= 0; s--) { // if you know the href of the stylesheet you can continue here /* if (isNotTheRightStylesheet(document.styleSheets[s].href)) { continue; } */ // get all the rules in this stylesheet var cssRules = document.styleSheets[s].cssRules || document.styleSheets[s].rules || []; // IE support // find matching selector for (var c=0; c < cssRules.length; c++) { if (cssRules[c].selectorText === '.this-is-config.' + variableName) return cssRules[c].style['quotes']; } } return null; } var value = getConfig('variableName');

實驗？你不能爲該嵌入式內容編寫CSS嗎？ – Bergi

其中一些是SVG。一個例子是我想讓用戶（CSS themer）能夠選擇由我的JS生成的形狀類型（圓形，方形，星形），但在SVG中，這些是完全不同的基本類型（矩形，圓形，多邊形）。 –

也許在CSS文件中使用註釋

/* define myUserData: "myUserValue" */

使用AJAX調用文件然後解析css文件。

像這樣

jQuery.get("test.css", null, function(data) { 
    var comments = data.match(/\/\* define.*\*\//g); 
    for each (var c in comments) 
     alert(c); 
});

這是一個額外的要求，但由於CSS文件通常本地緩存（取決於服務器和客戶端的設置），它不應該是爲廣大用戶的昂貴的請求。

來源

2014-01-09 12:06:14 chim

這確實看起來更乾淨，而且「hacky」更少，因此我想到的是補充css規則集而不是重載它。我甚至可以創建自己的供應商前綴。 -chris-transform：;） –

另一種選擇是使用永遠不會應用的選擇器聽起來像這樣的東西可能對您的用例更有用。

但是您確實需要遍歷每個樣式表的cssRules對象。

如果你知道你的樣式表的href，或者你可以通過正則表達式匹配它，那麼你可以解析這個樣式表。

/* css */ 
.this-is-config.variableName 
{ 
     /* quotes works and is valid css */ 
     quotes:"circle"; 
     /* content works, but should only be for pseudo elements */ 
     content: "hey-hey"; 
     /* Some other rules will not work */ 
     color: "rouge"; 
}

中獲取價值在這裏與此fiddle

來源

2014-01-09 15:06:00 chim

尼斯小提琴。並喜歡使用引號屬性（不能相信有一個CSS2屬性，我從來沒有聽說過） –

是的，撓撓我的頭試圖想想最好的候選人。我仍然接近一個稍微清潔（與評論） – chim

是否有任何技術可以通過CSS規則將任意文本傳遞給JavaScript？

回答

相關問題