2010-04-10 10 views
5

w Firefox, Opera i IE mogę je zdobyć poprzez:Jak uzyskać wszystkie obsługiwane właściwości CSS w pakiecie WebKit?

>> for (k in document.body.style) console.log(k) 
-> opacity 
    background 
    height 
    textAlign 
    . 
    ... long list ... 
    . 
    pointerEvents

W WebKit wynik jest zupełnie inna:

>> for (k in document.body.style) console.log(k) 
-> cssText 
    length 
    parentRule 
    getPropertyValue 
    getPropertyCSSValue 
    removeProperty 
    getPropertyPriority 
    setProperty 
    item 
    getPropertyShorthand 
    isPropertyImplicit

Aktualizacja: najnowszy WebKit does enumerate over CSS properties in HTMLElement.style sam sposób wszystkich ponad przeglądarki robią.

Odpowiedz

6

Odpowiedź jest

>> document.defaultView.getComputedStyle(document.body, '') 
-> CSSStyleDeclaration 
    0: "background-attachment" 
    1: "background-clip" 
    2: "background-color" 
    3: "background-image" 
    4: "background-origin" 
    5: "background-position" 
    6: "background-repeat" 
    7: "background-size" 
    8: "border-bottom-color" 
    9: "border-bottom-left-radius" 
    ...

Dzięki Anton Byrna dla jego solution.


Jeden problem pozostaje: getComputedStyle() nie zwraca skróty jak background i border.

+0

Iterowanie 'document.body.style' zapewnia właściwości stylu JavaScript. 'document.defaultView.getComputedStyle (document.body, '')' ma tylko właściwości CSS. na przykład 'backgroundAttachment' vs.' background-attachment'. –

+0

w dowolny sposób, aby uzyskać wszystkie możliwe wskazówki dotyczące wartości takich jak "dziedziczenie", procent, tekst na dole; dla każdego z nich. nawet jeśli używasz js. –

1

Nie mam pewności co do dostępu do Javascript, ale możesz wyszukać wszystkie obsługiwane właściwości (nawet własności) tutaj: CSS property names.

+4

Link do nazw właściwości CSS zmieniono na http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSPropertyNames.in –

+0

@Ghodmode Dzięki, poprawiłem swoją odpowiedź. – fuxia

Powiązane problemy