style, CSSStyleDeclaration | NN 6 IE 4 DOM 2 |
| |
Dans son sens le plus générique, un objet style est le point d´accès permettant aux scripts de lire et d´écrire des attributs de style individuels pour un élément donné. L´objet style présente (ou a le potentiel nécessaire pour présenter) chaque attribut de feuille de style pris en charge par le navigateur (les types d´attributs CSS décrits dans le chapitre 11).
|
|
Mais, en pratique, un objet style auquel vous accédez par le biais de la propriété style d´un objet élément HTML (l´une des propriétés partagées décrites précédemment dans ce chapitre) a une portée limitée: Il ne reflète que les paramètres CSS explicitement définis dans la balise de l´élément par le biais des paramètres ou de l´attribut style affectés à la propriété style de l´élément par script. Mais d´autres feuilles de style associées au navigateur (feuilles de style internes) et au document (règles de feuille de syle explicites définies dans l´élément <style> et les règles importées par le biais d´un élément link ou d´une règle @import) affectent également les caractéristiques d´affichage de l´élément. Il est possible de lire l´ensemble des attributs de feuille de style affectant un élément, la définition de style applicable, mais il faut utiliser une syntaxe dépendant du navigateur. IE utilise la propriété currentStyle d´un élément, alors que Netscape 6 utilise la méthode window.getComputedStyle() du DOM W3C. Les deux syntaxes renvoient un objet qui permet aux scripts de passer en revue la valeur de chaque valeur d´attribut de style applicable.
|
|
Alors que les trois objets IE ayant trait au style (style, currentStyle et runtimeStyle) renvoient un objet style avec des propriétés présentant des attributs de style CSS, la situation est plus complexe dans Netscape 6. D´un côté, Netscape 6 implémente une version de l´objet CSSStyleDeclaration du DOM W3C qui présente tous les attributs CSS en tant que propriétés. C´est la version à laquelle on accède par le biais de la propriété style d´un objet élément (comme dans IE, ce qui signifie que la propriété style d´un objet élément fonctionne sur les divers navigateurs). Mais lorsque vous lisez la feuille de style applicable (par le biais de window.getComputedStyle()), l´objet renvoyé ne présente pas les attributs CSS directement en tant que propriétés. A la place, vous devez utiliser les méthodes CSSStyleDeclaration (répertoriées ci-dessous) pour passer en revue une valeur d´attribut spécifique par nom. C´est une façon plus longue d´accéder à une valeur d´attribut de style applicable particulière, mais tout à fait dans le style du reste de la syntaxe de lecture d´attributs déployée dans le DOM W3C. La seule fois où cette différence entre navigateurs vous affecte est quand vous avez besoin de voir l´attribut de style applicable pour un style non modifié. Une fois que vous définissez une valeur d´attribut par le biais de la propriété style d´un objet élément, vous pouvez le lire par le biais de la propriété style quel que soit le navigateur).
|
|
Cette section répertorie les propriétés d´objet style, ainsi que les méthodes officielles Netscape 6 (DOM W3C), permettant d´accéder à ces attributs. Le DOM W3C regroupe un pourcentage important des propriétés de l´objet style dans un objet intitulé CSS2Properties. La spécification offre l´objet CSS2Properties comme un objet pratique facultatif pour les navigateurs. Heureusement pour les auteurs de scripts travaillant avec tous les navigateurs, Netscape 6 implémente CSS2Properties, au moins pour la propriété style de l´objet élément.
|
|
Les propriétés de l'objet style répertoriées ci-dessous correspondent aux attributs CSS. Pour plus de détails sur une propriété particulière, consultez la liste correspondante dans le chapitre 11.
|
|
Référence de modèle d'objet |
|
- [window.]document.getElementById("elementID").style
- [window.]document.styleSheets[i].rules[j].style
- [window.]document.styleSheets[i].cssRules[j].style
|
|
Propriétés spécifiques à l´objet |
|
accelerator | azimuth | background |
backgroundAttachment | backgroundColor | backgroundImage |
backgroundPosition | backgroundPositionX | backgroundPositionY |
backgroundRepeat | behavior | blockDirection |
border | borderBottom | borderBottomColor |
borderBottomStyle | borderBottomWidth | borderCollapse |
borderColor | borderLeft | borderLeftColor |
borderLeftStyle | borderLeftWidth | borderRight |
borderRightColor | borderRightStyle | borderRightWidth |
borderSpacing | borderStyle | borderTop |
borderTopColor | borderTopStyle | borderTopWidth |
borderWidth | bottom | captionSide |
clear | clip | clipBottom |
clipLeft | clipRight | clipTop |
color | content | counterIncrement |
counterReset | cssFloat | cssText |
cue | cueAfter | cueBefore |
cursor | direction | display |
elevation | emptyCells | filter |
font | fontFamily | fontSize |
fontSizeAdjust | fontStretch | fontStyle |
fontVariant | fontWeight | height |
imeMode | layoutFlow | layoutGrid |
layoutGridChar | layoutGridLine | layoutGridMode |
layoutGridType | left | letterSpacing |
lineBreak | lineHeight | listStyle |
listStyleImage | listStylePosition | listStyleType |
margin | marginBottom | marginLeft |
marginRight | marginTop | markerOffset |
marks | maxHeight | maxWidth |
minHeight | minWidth | MozBinding |
MozOpacity | orphans | outline |
outlineColor | outlineStyle | outlineWidth |
overflow | overflowX | overflowY |
padding | paddingBottom | paddingLeft |
paddingRight | paddingTop | page |
pageBreakAfter | pageBreakBefore | pageBreakInside |
pause | pauseAfter | pauseBefore |
pitch | pitchRange | pixelBottom |
pixelHeight | pixelLeft | pixelRight |
pixelTop | pixelWidth | playDuring |
posBottom | posHeight | posLeft |
posRight | posTop | posWidth |
position | quotes | richness |
right | rubyAlign | rubyOverhang |
rubyPosition | scrollbar3dLightColor | scrollbarArrowColor |
scrollbarBaseColor | scrollbarDarkShadowColor | scrollbarFaceColor |
scrollbarHighlightColor | scrollbarShadowColor | scrollbarTrackColor |
size | speak | speakHeader |
speakNumeral | speakPunctuation | speechRate |
stress | styleFloat | tableLayout |
textAlign | textAlignLast | textAutospace |
textDecoration | textDecorationBlink | textDecorationLineThrough |
textDecorationNone | textDecorationOverline | textDecorationUnderline |
textIndent | textJustify | textKashidaSpace |
textOverflow | textShadow | textTransform |
textUnderlinePosition | top | unicodeBidi |
verticalAlign | visibility | voiceFamily |
volume | whiteSpace | widows |
width | wordBreak | wordSpacing |
wordWrap | writingMode | zIndex |
zoom | | |
|
|
Méthodes spécifiques à l´objet |
|
getPropertyCSSValue() | getPropertyPriority() | getPropertyValue() |
item() | removeProperty() | setProperty() |
|
|
Propriétés de gestionnaire d´événements spécifiques à l´objet |
Aucune.
|