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

我试图实现的目标是使用

jQuery

收集任何

HTML

页面的所有

CLASS

css

样式，然后循环遍历每个

类

，收集每个

类的
高度
、
宽度
、
顶部
和
左侧
，然后将其放入
数组
，并将其记录到控制台

下面是我目前使用代码的位置。我能够收集所有的页面
类
，但很难循环浏览它们，以获得每个
类
的
高度
、
宽度
、
顶部
和
左侧
。下面是代码，是否有人能够指导我正确的方向，或者可能给出一个如何构建它的示例？。任何帮助都将不胜感激：）

$（文档）.ready（函数（）{
//变数
var allClassNames=[]；
var eachlassname=“”；
//从HTML页面获取类名
$（'[class]'）。每个（函数eachClassName（）{
$.each（$（this.attr（'class'））.split（''），function（i，className）{
if（className.length&$.inArray（className，allClassNames）=-1）{
所有className.push（className）；
}
});
});
//获取每个类的CSS样式
函数getStyleRuleValue（样式，选择器）{
for（var i=0；i
如果您使用的是
jQuery
方法，请不要将
jQuery
和
JavaScript
纯代码混合使用：

HTML代码：

<div class="div1 value1"></div>
<div class="div1 value2"></div>
<div class="div1 value3"></div>

.value1{
  top: 100px;
}

.value2{
  top: 200px;
}

.value3{
  top: 300px;
}

function getStyleRuleValue(style, selector){

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

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

    }); 

}

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

jQuery代码：

<div class="div1 value1"></div>
<div class="div1 value2"></div>
<div class="div1 value3"></div>

.value1{
  top: 100px;
}

.value2{
  top: 200px;
}

.value3{
  top: 300px;
}

function getStyleRuleValue(style, selector){

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

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

    }); 

}

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


编辑：

<div class="div1 value1"></div>
<div class="div1 value2"></div>
<div class="div1 value3"></div>

.value1{
  top: 100px;
}

.value2{
  top: 200px;
}

.value3{
  top: 300px;
}

function getStyleRuleValue(style, selector){

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

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

    }); 

}

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

如果要对所有页面类使用allClassNames
数组
（不需要此
数组
来迭代所有页面元素）：

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

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

不过，上面的代码应该可以让您开始学习（假设我正确理解了您所寻找的内容）。
您知道，您只需
$（'.two'）就可以完成这项工作。css（'top'）
？@adeneo为这个问题提供了宝贵的见解！更好的是，您可以向jquery发送一个css属性名数组，它将为每个属性名吐出值。这意味着以下工作：
$（'.two'）.css（['top'、'left'、'width'、'height']）
谢谢，这意味着很多：）但是如果HTML页面上有多个类。我如何能够循环遍历所有这些值，并显示这些值是否有效$（allClassNames[k]）.css（['top'，left'，width'，height']）
$（allClassNames）。each（function（）{…
我尝试了以下操作，但在控制台中一直没有定义，我做错了什么？：$（allClassNames）。each（function（）{console.log（$（allClassNames[k]）.css（['top'，left'，width'，height']）；）；