用边距定位所有元素的Javascript方法：自动

Question

我正在寻找一种简单的方法来定位页面上将 margin-left 和 margin-right 设置为 auto 的元素。

我得到了这个脚本，它在某些时候对我有帮助：

(function() {
  var elementsList = [];
  for (var i = 0; i < document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    if (styleSheet.rules) {
      for (var j = 0; j < styleSheet.rules.length; j++) {
        var rule = styleSheet.rules[j];
        if (rule && rule.style && rule.style.marginLeft == 'auto' && rule.style.marginRight == 'auto') {
          var smallList = document.querySelectorAll(rule.selectorText);
          if (smallList.length)
            elementsList = elementsList.concat(smallList);

        }

      }
    }
  }
  return elementsList
})();

虽然这个函数完成了一些工作，但它并没有捕捉到我在网站上看到的大多数 margin: auto 的情况。

你能告诉我一个更好的方法吗？

Answer 1

如果您可以使用 JQuery

正如 Martin Ernst 对 yonatan 的回答所说：'这将只选择 marginLeft/Right="auto" 的元素。'

此外，如 cmets 中所述，必须隐藏元素才能与 FF 和 safari 一起使用。

这应该使用 JQuery 工作：

$(document).ready(function() {
    var visibleElements = $('body *:visible');
    $('body *').hide();
    var elements = $('body *').filter(function() {
        return $(this).css('margin-left') == 'auto' && $(this).css('margin-right') == 'auto';
    })
    // show only elements that were visible
    visibleElements.show();
});

提示：如果由于某种原因，您不需要加载外部脚本，只需将缩小的 jquery 脚本的内容复制到您的开头即可。

Answer 2

使用 jQuery：
$('*').filter(function(i, d){return d.style.marginLeft == "auto" && d.style.marginRight == 'auto';});

Answer 3

我不想这么说，但这个成功不如我自己的版本。

Answer 4

这个问题不是小事。即使在window.getComputedStyle() 的日子里，当边距设置为auto 时，也很难为marginLeft/Right 获得跨浏览器的可靠答案。所以这肯定不是一个完整的答案，但会尝试帮助找到一个。

margin-left 和margin-right 在使用margin-shorthand 时也是auto：

#elem {margin: auto;} // or:
#elem {margin: 100px auto;} // or:
#elem {margin: 100px auto 30px;} // or:
#elem {margin: 100px auto 30px auto;}

当您在样式表中搜索时，您也必须找到这些符号。在您的代码中在 var elementsList=[]; 之前包含此函数：

function expand(margin) {
    var parts = margin.split(' ');
    for (var i = 3; i; i--) parts[i] = parts[i] || parts[i - 2] || parts[0];
    return parts[1] == 'auto' && parts[3] == 'auto';
}

然后把你内心的if-condition改成：

if (rule && rule.style &&
    (rule.style.marginLeft == 'auto' && rule.style.marginRight == 'auto' || expand(rule.style.margin))
) {
    var smallList = document.querySelectorAll(rule.selectorText);
    if (smallList.length) elementsList = elementsList.concat(smallList);
}

现在您还可以了解使用 margin 的规则。但是您的代码仍然存在一些问题：

• 当匹配多个规则时，可能会多次列出相同的元素
• 并不是所有的listet 元素都真正使用marginLeft/Right = auto 呈现。也许那个 css 会被另一个更具体的规则覆盖。
• 正如 dfsq 在他的评论中提到的那样，您可能找不到这种方式的内联样式。