Question

我正在寻找一种简单的方法来在页面上找到边距左边和边距右边设置为自动的元素。

我有这个脚本，这有时帮助我：

＆＃13;

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

＆＃13;

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

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

Answer 1

如果您可以使用JQuery

正如Martin Ernst对于yonatan的回答所说：＆＃39;这将只选择marginLeft / Right =＆＃34; auto＆＃34;。＆＃39;

此外，如评论中所述，必须隐藏元素才能使用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也是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的规则。但是代码中存在一些问题：

当匹配多个规则时，可能会多次列出相同的元素
使用marginLeft / Right = auto实际渲染所有侦听元素并不是不可取的。也许css被另一个更具体的规则所覆盖。
在评论中提到 dfsq ，可以使用内联样式找不到这种方式。

Javascript定位所有带边距元素的方法：auto

4 个答案: