Modo Javascript para localizar todos os elementos com margin: auto

9

Estou procurando uma maneira fácil de localizar elementos na página que tenham margin-left e margin-right definidos como auto.

Eu peguei este script, isso me ajudou um pouco:

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

Enquanto essa função faz parte do trabalho, ela não captura a maioria dos casos de margin: auto que vi em sites.

Você pode me mostrar uma maneira melhor?

    
por GuruYaya 12.11.2014 в 11:27
fonte

4 respostas

2

Se você pode usar o JQuery

Como disse Martin Ernst para a resposta de yonatan: 'Isto irá selecionar apenas elementos com marginLeft / Right="auto".'

Além disso, conforme descrito nos comentários, os elementos devem ser ocultados para funcionar com FF e safari.

Isso deve funcionar usando 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();
});

Dica : se por algum motivo, você não precisar carregar scripts externos, apenas copie o conteúdo do script jquery minificado no início do seu.

    
por Nicolas 13.11.2014 / 10:34
fonte
0

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

    
por yonatan 12.11.2014 / 13:32
fonte
0

Eu odeio dizer isso, mas este tem menos sucesso do que a minha própria versão.

    
por GuruYaya 13.11.2014 / 19:17
fonte
0

Este problema não é trivial . Mesmo nos dias de window.getComputedStyle() , é difícil obter uma resposta confiável do crossbrowser para marginLeft / Right quando as margens são definidas como auto . Portanto, esta não é uma resposta completa, mas tentará ajudar a encontrar uma.

margin-left e margin-right também são auto quando a redução de margem é usada:

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

Você também precisa encontrar essas notações quando estiver pesquisando nas folhas de estilo. Inclua essa função antes de var elementsList=[]; em seu código:

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

Em seguida, altere seu if-condition interno para:

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

Agora você também recebe as regras em que margin é usado. Mas alguns problemas permanecem com seu código:

  • Os mesmos elementos podem ser listados várias vezes quando eles correspondem a mais de uma regra
  • Não é certo que todos os elementos do listet são realmente renderizados com marginLeft / Right = auto. Talvez esse css seja substituído por outra regra mais específica.
  • Como dfsq mencionado no comentário dele, pode haver estilos inline que você não consegue encontrar dessa maneira.
por Martin Ernst 13.11.2014 / 20:08
fonte