Tüm öğeleri kenar boşluğuyla bulmak için Javascript yolu: auto

Question

Sayfadaki öğeleri marj-sol ve kenar boşluğu otomatik olarak ayarlanmış olan konumlarda bulmak için kolay bir yol arıyorum.

aldım bana biraz zaman yardımcı olan bu senaryo,:

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

bu fonksiyon yapılan işin bazı alırken

, bu margin: auto I çoğu durumlarda yakalamak değil web sitelerinde görülüyor.

Bana daha iyi bir yol gösterebilir misin?

Answer 1

Eğer Yonatan en cevabını Martin Ernst söylediği gibi JQuery

kullanmak sorununuz yoksa: 'Bu marginLeft/Sağ = "auto sadece unsurları seçecektir ".' Ayrıca, yorumlarda belirtildiği gibi, FF ve safari ile çalışmak için öğeler gizlenmelidir.

Bu kullanarak çalışmalıdır 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(); 
}); 

İpucu: Bazı nedenlerden dolayı, dış komut yüklenmez gerekiyorsa, sadece senin başında minified jquery komut içeriğini kopyalamak .

Answer 2

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

Answer 3

Bunu söylemekten nefret ediyorum, ama bu daha az başarıya sahip, kendi versiyonum.

Answer 4

Bu sorun değil trivial. window.getComputedStyle() günlerinde bile, kenar boşlukları auto olarak ayarlandığında, çapraz-rant için güvenli bir yanıt elde etmek zordur. Yani bu tam bir cevap değil, ama bir tane bulmaya yardım edecek. margin-steno kullanıldığında

margin-left ve margin-right da auto şunlardır:

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

Sen stil içinde ararken çok bu gösterimler bulmalıyız. Sadece kodunuzu var elementsList=[]; önce bu işlevi ekleyin: Artık ayrıca margin kullanıldığı kuralları olsun

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

: İçinizdeki if-condition için

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

Sonra değiştirin. Ancak bazı sorunlar kodu ile kalmak:

• aynı elemanları birden çok kez listelenmiş olabilir, birden fazla kural
• Tüm listet elemanları gerçekten marginLeft/Sağ = oto ile yansıtılmalarıdır shure değil eşleştiğinde. Belki bu css başka bir kural tarafından geçersiz kılınır.
• dfsq'da yaptığı yorumda, bu şekilde bulamayacağınız satır içi stilleri olabilir.