Question

我想要实现的目标是使用jQuery来收集任何CLASS页面的所有css HTML样式，然后循环遍历每个classes页面{1}}并收集每个height的{{1}}，width，top和left，然后将其放入class并将其记录到控制台。

以下是我目前使用代码的地方。我可以收集所有网页Array，但很难遍历它们，以便为每个网页提供classes，height，width和top left。下面是代码，是否有人能够指导我正确的方向或可能给出一个如何构建它的例子？任何帮助将不胜感激：）

class

Answer 1

如果您使用JavaScript使用其方法，请不要混用jQuery和<div class="div1 value1"></div> <div class="div1 value2"></div> <div class="div1 value3"></div>纯代码：

HTML代码：

.value1{
  top: 100px;
}

.value2{
  top: 200px;
}

.value3{
  top: 300px;
}

CSS代码：

function getStyleRuleValue(style, selector){

    $("." + selector).each(function(){

        console.log( $(this).css(style) );

    }); 

}

getStyleRuleValue("top", "div1");
// 100px
// 200px
// 300px

jQuery代码：

Array

jsfiddle

修改

如果您想将allClassNames Array与所有页面类一起使用（您不需要此var allClassNames = []; $("[class]").each(function eachClassName(){ $.each($(this).attr("class").split(" "), function(i, className) { if (className.length && $.inArray(className, allClassNames) === -1) { allClassNames.push(className); } }); }); $("." + allClassNames.join(",.")).each(function(){ console.log( $(this).css(['top', 'left', 'width', 'height']) ); });来迭代所有页面元素）：

NSView

jsfiddle

Answer 2

我首先根据样式表构建样式选择器的映射，然后使用它来查找我在文档中找到的每个类。

function getStyles() {

    var allRules = {};
    var selectorIndex = {};

    // This will map each individual class to a selector that mentions it
    // i.e. if you have a selector like ".top a", this will create two entries, one for ".top" and
    // one for "a". Each entry will point to the string ".top a", which can then be used to look up
    // the rule in the allRules map.
    var indexSelectors = function (selectorText) {
        if(typeof selectorText === "string" && selectorText.length) {
            $.each(selectorText.split(' '), function (i, sel) {
                var currentSelectors = selectorIndex[sel];
                if (typeof currentSelectors === 'undefined') {
                    currentSelectors = [];
                }
                currentSelectors.push(selectorText);
                selectorIndex[sel] = currentSelectors;
            });
        }
    };

    // Make a map of all top/left/width/height styles based on the selectors. This will be a "last one
    // wins" map -- later entries will overwrite earlier ones. If you don't want "last one wins," you
    // can use the array.push strategy that the indexSelectors function uses.
    var extractStyles = function (i, rule) {
        indexSelectors(rule.selectorText);
        if(rule.style) {
            var topStyle = rule.style['top'];
            var leftStyle = rule.style['left'];
            var widthStyle = rule.style['width'];
            var heightStyle = rule.style['height'];
            // only make an entry if there's at least one non-empty style in the list we're interested in
            if(topStyle.length || leftStyle.length || widthStyle.length || heightStyle.length) {
                allRules[rule.selectorText] = {
                    top: rule.style['top'],
                    left: rule.style['left'],
                    width: rule.style['width'],
                    height: rule.style['height']
                }
            }
        }
    };

    var extractFromStyleSheet = function (i, styleSheet) {
        var rules;
        if (styleSheet) {
            rules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules;
            if (rules !== null) {
                $.each(rules, extractStyles);
            }
        }
    };

    // build allRules dictionary
    $(document.styleSheets).each(extractFromStyleSheet);

    $('[class]').each(function eachClassName(){
        $.each($(this).attr('class').split(' '),function(i,className) {
            if (typeof className === 'string' && className.length) {
                className = '.' + className;
                var selectors = selectorIndex[className];
                if (selectors) {
                    $.each(selectors, function (i, sel) {
                        var found = allRules[sel];
                        if (found) {
                            console.log(className, sel, found);
                        }
                    });
                }
            }
        });
    });
}

我不确定我完全理解你在这里想做什么，特别是你想如何处理这样的CSS样式？

.two {
    top: 12px;
}

.two a {
    top: 24px;
}

仍然，上面的代码应该让你开始（假设我已经正确地理解了你正在寻找的东西）。

如何在函数参数中使用循环并将结果记录到控制台

2 个答案: