Uno stile tutto loro

12 Giu 2008 alle 10:49 da Luke Smith | In Sviluppo | 8 commenti

Modificare lo stile di un elemento DOM durante l'interazione dell'utente è uno dei pilastri della creazione di interfacce DHTML che il passaggio da uno stato all'altro in un liscio, e (si spera) intuitivo. Ogni HTMLElement nel DOM contiene style , una collezione di proprietà corrispondenti alle proprietà CSS capito dal browser. Per i browser abilitato JavaScript e CSS, le seguenti due paragrafi dovrebbe contenere testo rosso:

 <- Il paragrafo 1 ->
 <p style="color: #f00"> Questo paragrafo è di colore rosso </ p>

 <- Paragrafo 2 ->
 <p id="x"> colore Questo paragrafo sarà rosso dopo il JavaScript corre </ p>
 <script type="text/javascript">
 (Function () {
     var el = document.getElementById ('x');

     el.style.color = '# f00';

 })();
 </ Script>

Anche le proprietà CSS che non sono applicabili ad un dato elemento avrà rappresentanza in quell'elemento style collezione. Ad esempio, anche il <br> elemento avrà la el.style.letterSpacing proprietà.

Nomi sono stati cambiati per proteggere gli innocenti

I nomi delle proprietà di stile di JavaScript sono cammello versioni cased delle loro controparti CSS, in modo da font-family in CSS diventa el.style.fontFamily nella collezione stile. "Float" è una parola riservata in JavaScript, pertanto la proprietà float CSS viene dato un nome diverso. In Internet Explorer, styleFloat viene utilizzato, in cui Firefox, Safari e Opera usano tutti cssFloat (Opera supporta anche styleFloat , in realtà). Inoltre, ogni browser ha una miriade di specialità proprietà CSS che mostrano anche nella collezione di stile (ad es -moz-border-radius , che diventa el.style.MozBorderRadius in Firefox). Diversi styleFloat / cssFloat , i venditori del browser in gran parte d'accordo su denominazioni di proprietà.

La follia e il metodo

Ho deciso di documentare le proprietà che erano presenti in ognuno un browser grado di style raccolta (senza fare affermazioni sulla loro supporto funzionale per valori specifici).

Per ogni browser, ho usato un semplice for (var prop in el.style) metodo per scorrere l'insieme di stile e controllo incrociato in uno strumento di sviluppo, se disponibile. Nello specifico, ho usato la seguente:

Browser Metodo
Internet Explorer 6 for ( in ) e Visual Web Developer 2008 Express Edition
Internet Explorer 7 for ( in ) e Visual Web Developer 2008 Express Edition
Firefox 2.0.0.14 for ( in ) e Firebug 1,1
Firefox 3 (Release Candidate 2) for ( in ) e Firebug 1,1
Safari 3.1.1 (WebKit costruire 4.525,18) DOM Inspector *
Opera 9,27 for ( in )
Opera 9.5 (beta e GA) for ( in ) e Opera Dragonfly

* - Safari non enumera le proprietà di stile non assegnati, per cui for ( in ) non mostra niente di utile.

Tutti i test sono stati eseguiti su un MacBook Pro con OSX 10.4. L'IE e FF2 sono stati testati su istanze Parallels con Windows XP. Ho solo documentato le proprietà che non sono stati preceduti da un identificatore fornitore (ad esempio-moz), e omesso metodi e campi meta come setProperty e length . L'unica eccezione a questo essere cssText , che parleremo più tardi. Quindi, senza ulteriori indugi ...

Proprietà di stile attraverso un grado (più un paio) i browser

Proprietà con sfondi d'oro sono presenti in tutti i browser testati.

Proprietà IE6 IE7 FF2 FF3 S3 Op9.27 Op9.5
acceleratore Y Y N N N N N
alignmentBaseline N N N N Y N Y
azimut N N Y Y N N N
fondo Y Y Y Y Y Y Y
Attaccamento Y Y Y Y Y Y Y
Colore Y Y Y Y Y Y Y
Immagine Y Y Y Y Y Y Y
Posizione Y Y Y Y Y Y Y
X Y Y N N N N N
Y Y Y N N N N N
Ripetere Y Y Y Y Y Y Y
baselineShift N N N N Y N Y
comportamento Y Y N N N N N
confine Y Y Y Y Y Y Y
Top, Right, Bottom, Left Y Y Y Y Y Y Y
Colore Y Y Y Y Y Y Y
Stile Y Y Y Y Y Y Y
Larghezza Y Y Y Y Y Y Y
Colore Y Y Y Y Y Y Y
Stile Y Y Y Y Y Y Y
Larghezza Y Y Y Y Y Y Y
Crollo Y Y Y Y Y Y Y
Spaziatura N N Y Y N Y Y
fondo Y Y Y Y Y Y Y
boxSizing N N N N N N Y
captionSide N N Y Y Y Y Y
chiaro Y Y Y Y Y Y Y
clip Y Y Y Y Y Y Y
Path N N N N Y N Y
Regola N N N N Y N Y
colore Y Y Y Y Y Y Y
Interpolazione N N N N Y N Y
Filtri N N N N Y N Y
Profilo N N N N N N Y
Rendering N N N N Y N Y
columnSpan N N N N N N Y
contenuto N N Y Y N Y Y
counterIncrement N N Y Y N Y Y
counterReset N N Y Y N Y Y
cssFloat N N Y Y Y Y Y
cssText *** Y Y Y Y Y Y Y
spunto N N Y Y N N N
Dopo N N Y Y N N N
Prima N N Y Y N N N
cursore Y Y Y Y Y Y Y
direzione Y Y Y Y Y Y Y
display Y Y Y Y Y Y Y
displayAlign N N N N N N Y
dominantBaseline N N N N N N Y
elevazione N N Y Y N N N
emptyCells N N Y Y Y Y Y
enableBackground N N N N N N Y
riempire N N N N Y N Y
Opacità N N N N Y N Y
Regola N N N N Y N Y
filtro Y Y N N Y N Y
floodColor N N N N Y N Y
floodOpacity N N N N Y N Y
font Y Y Y Y Y Y Y
Famiglia Y Y Y Y Y Y Y
Dimensione Y Y Y Y Y Y Y
Regolare N N Y Y N Y Y
Tratto N N Y Y N Y Y
Stile Y Y Y Y Y Y Y
Variante Y Y Y Y Y Y Y
Peso Y Y Y Y Y Y Y
glyphOrientationHorizontal N N N N N N Y
glyphOrientationVertical N N N N N N Y
altezza Y Y Y Y Y Y Y
imageRendering N N N N N N Y
imeMode Y Y N Y N N N
crenatura N N N N N N Y
layoutFlow Y Y N N N N N
layoutGrid Y Y N N N N N
Char Y Y N N N N N
Linea Y Y N N N N N
Modo Y Y N N N N N
Tipo Y Y N N N N N
sinistra Y Y Y Y Y Y Y
letterSpacing Y Y Y Y Y Y Y
lightingColor N N N N Y N Y
lineBreak Y Y N N N N N
lineHeight Y Y Y Y Y Y Y
lineIncrement N N N N N N Y
ListStyle Y Y Y Y N Y Y
Immagine Y Y Y Y Y Y Y
Posizione Y Y Y Y Y Y Y
Tipo Y Y Y Y Y Y Y
margine Y Y Y Y N Y Y
Top, Right, Bottom, Left Y Y Y Y Y Y Y
markerEnd N N N N Y N Y
markerMid N N N N Y N Y
markerOffset N N Y Y N Y Y
markerStart N N N N Y N Y
segna N N Y Y N Y Y
maschera N N N N Y N Y
MaxHeight N Y Y Y Y Y Y
MaxWidth N Y Y Y Y Y Y
minHeight Y Y Y Y Y Y Y
minWidth N Y Y Y Y Y Y
navDown N N N N N N Y
navIndex N N N N N N Y
navLeft N N N N N N Y
navRight N N N N N N Y
navUp N N N N N N Y
opacità N N Y Y Y Y Y
orfani N N Y Y Y Y Y
profilo N N Y Y N Y Y
Colore N N Y Y Y Y Y
Offset N N Y Y N N Y
Stile N N Y Y Y Y Y
Larghezza N N Y Y Y Y Y
Overflow Y Y Y Y Y Y Y
X Y Y Y Y Y N Y
Y Y Y Y Y Y N Y
imbottitura Y Y Y Y Y Y Y
Top, Right, Bottom, Left Y Y Y Y Y Y Y
pagina N N Y Y N Y Y
BreakAfter Y Y Y Y Y Y Y
BreakBefore Y Y Y Y Y Y Y
BreakInside N N Y Y Y Y Y
pausa N N Y Y N Y Y
Dopo N N Y Y N Y Y
Prima N N Y Y N Y Y
pece N N Y Y N N N
Gamma N N Y Y N Y Y
pointerEvents N N N N Y N Y
posizione Y Y Y Y Y Y Y
virgolette N N Y Y N Y Y
ridimensionare N N N N Y N N
ricchezza N N Y Y N N N
destra Y Y Y Y Y Y Y
rowSpan N N N N N N Y
rubyAlign Y Y N N N N N
rubyOverhang Y Y N N N N N
rubyPosition Y Y N N N N N
scrollbar3dlightColor Y Y N N N N Y
scrollbarArrowColor Y Y N N N N Y
scrollbarBaseColor Y Y N N N N Y
scrollbarDarkShadowColor Y Y N N N N N
scrollbarDarkshadowColor N N N N N N Y
scrollbarFaceColor Y Y N N N N Y
scrollbarHighlightColor Y Y N N N N Y
scrollbarShadowColor Y Y N N N N Y
scrollbarTrackColor Y Y N N N N Y
shapeRendering N N N N Y N Y
dimensione N N Y Y N Y Y
solidColor N N N N N N Y
solidOpacity N N N N N N Y
parlare N N Y Y N Y Y
Testata N N Y Y N N N
Numerale N N Y Y N N N
Punteggiatura N N Y Y N N N
speechRate N N Y Y N Y Y
stopColor N N N N Y N Y
stopOpacity N N N N Y N Y
stress N N Y Y N N N
corsa N N N N Y N Y
Dasharray N N N N Y N Y
Dashoffset N N N N Y N Y
Linecap N N N N Y N Y
LineJoin N N N N Y N Y
MiterLimit N N N N Y N Y
Opacità N N N N Y N Y
Larghezza N N N N Y N Y
styleFloat Y Y N N N Y Y
tableLayout Y Y Y Y Y Y Y
textAlign Y Y Y Y Y Y Y
Scorso Y Y N N N N N
textAutospace Y Y N N N N N
textAnchor N N N N Y N Y
textDecoration Y Y Y Y Y Y Y
Blink (bool) Y Y N N N N N
LineThrough (bool) Y Y N N N N N
Nessuno (bool) Y Y N N N N N
Sopralineato (bool) Y Y N N N N N
Sottolineato (bool) Y Y N N N N N
textIndent Y Y Y Y Y Y Y
textJustify Y Y N N N N N
Tagliare Y Y N N N N N
textKashida Y Y N N N N N
Spazio Y Y N N N N N
textOverflow Y Y N N N N N
textRendering N N N N Y N Y
textShadow N N Y Y Y Y Y
textTransform Y Y Y Y Y Y Y
textUnderlinePosition Y Y N N N N N
top Y Y Y Y Y Y Y
unicodeBidi Y Y Y Y Y Y Y
vectorEffect N N N N N N Y
verticalAlign Y Y Y Y Y Y Y
viewportFill N N N N N N Y
Opacità N N N N N N Y
visibilità Y Y Y Y Y Y Y
voiceFamily N N Y Y N Y Y
volume N N Y Y N Y Y
whiteSpace Y Y Y Y Y Y Y
vedove N N Y Y Y Y Y
larghezza Y Y Y Y Y Y Y
wordSpacing Y Y Y Y Y Y Y
wordWrap Y Y N N Y N N
WritingMode Y Y N N Y N Y
zIndex Y Y Y Y Y Y Y
zoom Y Y N N N N N

Una nota sulla style.cssText

Il DOM level2 specifica definisce la cssText proprietà come

La rappresentazione analizzabile testuale del blocco di dichiarazione (escludendo le parentesi graffe circostante). L'impostazione di questo attributo comporterà l'analisi del nuovo valore e il ripristino di tutte le proprietà del blocco di dichiarazione compresa la soppressione o l'aggiunta di proprietà.

Ciò significa che è possibile impostare tutti gli attributi di stile in un colpo solo impostando el.style.cssText = myCSSTextString . Inoltre, il formato corretto per la stringa è normale sintassi CSS, come ad esempio quello che si assegna l'attributo di un tag di stile ( <p style="color: red; padding: 1em 2em; border-bottom: 2px solid #ccc">Hello world</p> ). È anche possibile impostare le proprietà più volte nella stessa stringa, e il browser conciliare la duplicazione come sarebbe durante l'analisi di un foglio di stile.

Ci sono alcune cose con l'utilizzo di cssText per l'assegnazione, comunque.

  • Opera genera un errore se c'è qualche CSS malformato nella stringa. (Le specifiche raccomanda di lanciare un errore se il valore assegnato è un errore di sintassi ed è analizzabile. C'è una discussione su ciò che sarebbe stato un valore CSS "analizzabile", ma tutti gli altri browser silenziosamente ignorare le dichiarazioni che non capiscono).
  • Firefox 2 può alterare il valore y background-position quando si riutilizza il valore corrente del cssText nell'assegnazione (come per esempio aggiungere con + =). Questo è fissato in FF3.

Ci possono essere altre considerazioni e che non ho ancora scoperto. Il rovescio della medaglia, l'analisi comparativa ha dimostrato che l'assegnazione di una singola proprietà tramite cssText è solo leggermente più lento rispetto l'impostazione della proprietà corrispondente nel mondo di stile e l'impostazione più di una proprietà è molto più veloce tramite cssText . Opera 9,27 è l'unica eccezione a questo, dove è stato sempre più veloce (nel mio test, almeno) per impostare le proprietà di stile direttamente.

Buon divertimento ottenere il vostro stile!

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

8 commenti

  1. Sono stati conosciuti per usare una tecnica simile per rilevare supporto dei CSS da JavaScript in rare situazioni.

    if (!YAHOO.lang.isUndefined(n.style.maxWidth))

    Commento di Chris Griego - 12 giugno 2008 #

  2. In FF2 + non è possibile ottenere il valore css 'background-position' in JavaScript.
    Naturalmente se lo si imposta in JavaScript è a posto.

    E in FF2 + value negativo 'z-index' di ('assoluto', 'relativa', 'fissa') elemento rende tale elemento non visibile.

    Entrambi dovrebbero essere fissati in FF3

    Solo il mio 2 centesimi

    Cordiali saluti
    Darek

    Commento di Darek Adamkiewicz - 12 Giugno 2008 #

  3. Questo è grande. Ti consiglia di aggiornare questa tabella di ripetere le voci (browser) ogni 30 o 50 righe o giù di lì?

    Commento di 5307853 - 12 Giugno 2008 #

  4. Molto utile, grazie. Qualsiasi idea se cambia cssText è più veloce di cambiare la classe?

    Commento di Matt Robinson - 13 Giu 2008 #

  5. Considerando che Opera 9.5 è stato rilasciato ieri, non vedo perché si dovrebbe utilizzare una versione beta veramente vecchio del browser. Attuale numero di build è 10063, mentre la versione testata è il numero di build 4808.

    Commento di Mario Remo-Mate - 13 giugno 2008 #

  6. [...] Clicca per vedere il tavolo pieno di proprietà CSS. [...]

    Pingback da Uno stile tutto loro «outaTiME - 13 Giugno 2008 #

  7. @ Matt,

    Non ho benchmark assegnando cssText contro l'impostazione del className. In generale, l'impostazione di stile elemento è direttamente solo preferibile quando è necessario assegnare valori dinamici. Oltre ad essere più pratica, è molto probabilmente più veloce di aggiornare className perché il browser non ha bisogno di fare il passaggio intermedio della analisi della cssText e aggiornamento delle proprietà nel mondo di stile dell'elemento prima del ridisegno.

    @ Marius-Remo
    Potrei avere letto male il numero di build. Da allora ho installato 9,5 GA e verificato non ci fossero modifiche ai membri collezione di stile. Tra l'altro, mostra Dragonfly 'audio di livello', 'riposo', 'di riposo dopo', e 'di riposo prima', ma a quanto pare non hanno rappresentanza nel mondo di stile come audioLevel (etc).

    Commento di Luca - 13 Giu 2008 #

  8. Suggerimento: modificare più attributi in più elementi contemporaneamente.

    multipleSpans = YAHOO.util.Dom.getElementsByClassName ('più', 'durata');
    YAHOO.util.Dom.setStyle (multipleSpans, 'cssText', 'text-decoration: underline; cursor: pointer;');

    Commento di Ben Swieringa - 23 Giu 2008 #

Al momento l'inserimento di commenti non è in questo momento.

Ospitato da Yahoo!

Copyright © 2006-2011 Yahoo! Inc. Tutti i diritti riservati. Informativa sulla privacy - Termini di Servizio

Powered by WordPress su Yahoo! Web Hosting .