如何使用jquery获取内部样式表中定义的所有类名?例如,如果我有像这样的内部样式表
<style id="custstyle" type="text/css">
.column{
font-size:13px;
font-family:arial, helvetica, verdana, sans-serif;
font-weight:normal;
color:rgb(221, 221, 221);
font-size:13px;
font-family:arial, helvetica, verdana, sans-serif;
font-weight:normal;
color:rgb(221, 221, 221);
}
</style>
并且$('#custstyle').html()
或$('#custstyle').text()
将返回整个css i-e
.column{
font-size:13px;
font-family:arial, helvetica, verdana, sans-serif;
font-weight:normal;
color:rgb(221, 221, 221);
font-size:13px;
font-family:arial, helvetica, verdana, sans-serif;
font-weight:normal;
color:rgb(221, 221, 221);
}
但我只想得到.column
。。。。
获取css选择器:
var a = $('#custstyle').html();
while (a.indexOf('{') != -1) {
alert(a.substring(0, a.indexOf('{')));
a = a.substring(a.indexOf('}') + 1);
}
Fiddle:http://jsfiddle.net/5gzxk/
在样式表中列出所有选择器的非标准、不推荐的方法是:
for(var i=0; i<document.styleSheets.length; i++) {
var s = document.styleSheets[i];
for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
var c = s.cssRules[j];
console.log(c.selectorText);
}
}
试试这个:
var all = document.querySelectorAll('body *');
var classArray = [];
for (var i=0; i < all.length; i++) {
for (var j = 0; j < all[i].classList.length; j++) {
if (classArray.indexOf(all[i].classList[j])<0) {
classArray.push(all[i].classList[j]);
}
}
}
编辑:由于您想将内部样式转换为内联css,这可能更有用
var all = document.querySelectorAll('body *');
var classObj = {};
for (var i = 0; i < all.length; i++) {
classObj[i] = {
node: all[i],
classes: []
};
for (var j = 0; j < all[i].classList.length; j++) {
classObj[i].classes.push(all[i].classList[j]);
}
}
我不知道这怎么有用。但是,如果您想获得选择器,您可以读取HTMLStyleElement的sheet
属性:
var rules = $('#custstyle').prop('sheet').cssRules;
var selectors = $.map(rules, function(rule){
return rule.selectorText;
});
这里selectors
是一个选择器阵列。
http://jsbin.com/iQEvuMeT/1/
如果您想获得选择器及其指定的样式:
var rules = $('#custstyle').prop('sheet').cssRules;
var results = $.map(rules, function(rule) {
var o = {};
$.each(rule.style, function(_, item) {
o[item] = rule.style[item];
});
return { selector: rule.selectorText, styles: styles };
});
现在results
是一个对象数组,为了向元素添加内联样式,可以使用css()
方法。既然它接受一个对象,你就可以编码:
$.each(results, function(_, v) {
$(v.selector).css(v.styles);
});
结果是:
<div class="column"
style="font-size: 13px; font-family: arial, helvetica, verdana, sans-serif; font-weight: normal; color: rgb(221, 221, 221);">
</div>
它似乎是无用和多余的,但也许在某些情况下它会有用!