Czy mogę używać konsoli/alertu/niektórych innych sposobów do odczytywania WSZYSTKICH właściwości CSS naraz?

Question

Próbuję debugować witrynę na iPadzie. Na pulpicie pojawia się element, na iPadzie go brakuje.

Pytanie:
Czy istnieje sposób na wyjście wszystkie CSS w jednym sprawozdaniu podobny do

console.log($('element').attr('class')); 

czy jest to jedyny sposób na znalezienie uszkodzonego mienia przejść przez wszystkie CSS reguł jeden po drugim ?

console.log($('element').css('position')) 
console.log($('element').css('top')) 
console.log($('element').css('left')) 
console.log($('element').css('right')) 
console.log($('element').css('bottom')) 
console.log($('element').css('width')) 
console.log($('element').css('height')) 
console.log($('element').css('display')) 
... you get the point... 

Dzięki za wejście

Answer 1

Trzeba window.getComputedStyle:

getComputedStyle() daje końcowe używane wartości wszystkich CSS właściwości elementu.

Obsługiwana we wszystkich nowoczesnych przeglądarkach (w tym IE9).

Prosty przykład:

var style = window.getComputedStyle($('element').get(0), null); 

jsFiddle Demo

Answer 2

jquery .css() działa lepiej niż .getComputedStyle gdyż stanowi różnicę przeglądarki (i opiera się na samej getComputedStyle), patrz http://api.jquery.com/css/

zobacz how to get all the calculated styles of an element with jQuery? i podaj tam odpowiedź :)

Answer 3

Oto mała wtyczka, która dodaje $ .fn.computedCSS() można użyć, aby uzyskać to, co inni już zaproponował:

Kod:

(function($) { 
    $.fn.computedCSS = function() { 
     var elem = $(this)[0]; 
     var styles = window.getComputedStyle(elem); 
     var computed = {}; 
     for (key in styles) { 
      if (!key.match(/^\d+$/) && typeof styles[key] !== 'function') { 
       computed[key] = styles[key]; 
      } 
     } 
     return computed; 
    }; 
})(jQuery); 

Demo:

http://jsfiddle.net/Kd6xR/

Answer 4

To dużo łatwiejsze do korzystania z niektórych narzędzia do zdalnego sprawdzania strony na iPadzie. iOS 6 będzie to wbudowane, ale teraz to niewiele. Jeśli używasz komputera Mac, wypróbuj wersję iWebInspector wraz z zestawem SDK iOS. Jeśli nie, możesz sprawdzić WeInRe.

1. Install iOS SDK (za darmo) i iWebInspector
2. Otwarte iWebInspector
3. kliknij "Otwórz iOS Simulator"
4. Przełącz do iPada poprzez hardware Menu -> Akcesoria -> iPad
5. Otwórz Safari i przejdź stronę, którą chcesz debugować
6. Kliknij "Wczytaj z Safari" ponownie w iWebInspector i wybierz stronę
7. Powinieneś teraz uzyskać WebKit debugger wewnątrz iWebInspector

WeInRe (Webkit Inspektor Remote) powinien działać na każdej platformie, bez konieczności iOS SDK. Nie działa tak dobrze, jak prawdziwe debuggery, ponieważ po prostu wstrzykuje skrypty i ma tylko dostęp do tego, co dostajesz przez javascript. Ale jest to znacznie łatwiejsze niż programowanie wszystkich programów css;) Czasami WeInRe nie przechwytuje zmian w DOM po obejrzeniu elementu. Poczekaj, aż DOM znajdzie się w stanie, w którym chcesz spojrzeć, zanim rozwiniesz element nadrzędny. WeInRe jest hostowany przez PhoneGap: debug.phonegap.com lub może być zainstalowany na komputerze http://phonegap.github.com/weinre/