Jquery 从内部样式表获取所有类名称

Jquery 从内部样式表获取所有类名称,jquery,css,Jquery,Css,如何使用jquery获得内部样式表中定义的所有类名称?例如,如果我有内部样式表,比如 <style id="custstyle" type="text/css"> .column{ font-size:13px; font-family:arial, helvetica, verdana, sans-serif; font-weight:normal;

如何使用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>

但是我只想得到
.column

在样式表中列出所有选择器的一种非标准、不推荐的方法是:

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);
   }
}

for(var i=0;i获取css选择器:

var a = $('#custstyle').html();
while (a.indexOf('{') != -1) {
    alert(a.substring(0, a.indexOf('{')));
    a = a.substring(a.indexOf('}') + 1);
}
小提琴:试试这个:

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]);
        }
    }
}
var all=document.querySelectorAll('body*');
var classArray=[];
对于(变量i=0;iif(classArray.indexOf(all[i].classList[j])我不知道这有什么用处。但是,如果您想获得选择器,可以阅读以下内容的
工作表
属性:

这里的
选择器
是一个选择器数组

如果要获取选择器及其指定样式:

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>


它似乎无用且多余,但在某些情况下可能有用!

为什么需要它?我想将内部样式表转换为inline@user1888781哇,这是个糟糕的主意。你为什么要这么做?我发现inline.plugin.js只转换我们提供标识符的元素的css…所以我想浏览所有类名并将其发送到jquery。有两次你问了相同的问题。你应该考虑编辑你的问题。那么最好的方法是什么???我的主要任务是将内部css转换为内联css。-@techfoobart如果使用任何其他选择器,这将崩溃。
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 };
});
$.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>