从这段代码：
<div class="test"></div>
CSS
.test {
background-color:red;
font-size:20px;
-custom-data1: value 1;
-custom-data2: 150;
-custom-css-information: "lorem ipsum";
}
使用javascript – 例如来自$(‘.test’) – 如何获得具有以前缀“-custom-”开头的属性名称的CSS属性列表？
(它们可以有各种名称,但总是相同的前缀)
我想得到这个：
{
customData1: "value 1",customData2: 150,customCssInformation: "lorem ipsum"
}
我知道我也可以使用data-HTML属性,但出于一些非常具体的原因,我需要使用CSS等价物.谢谢你的帮助.
解决方法
简答：IE 9将为您提供这些值.
但是,Firefox / Chrome / Safari会解析它们.
您可以遍历文档的样式表以找到与所需选择器的匹配(请注意,这可能是一个代价高昂的过程,尤其是在具有大/多个CSS文件的站点上)
var css = document.styleSheets,rules;
// loop through each stylesheet
for (var i in css) {
if (typeof css[i] === "object" && css[i].rules || css[i].cssRules) {
rules = css[i].rules || css[i].cssRules;
// loop through each rule
for (var j in rules) {
if (typeof rules[j] === "object") {
if (rules[j].selectorText) {
// see if the rule's selectorText matches
if (rules[j].selectorText.indexOf('.test') > -1) {
// do something with the results.
console.log(rules[j].cssText);
$('.test').html(rules[j].cssText);
}
}
}
}
}
}
你会注意到IE 9以外的浏览器(尚未测试IE 8或更低版本)已经从cssText中删除了-custom-样式.
