Javascript : Changer style cssFermé

Question

Bonjour,
Je programme en javascript et j'aimerai modifier dynamiquement le style d'un span ou d'une div.

document.getElementById("div").style.backgroundColor" , par exemple ne convient pas car je voudrait modifier tout le style d'un coups  mais document.getElementById("div").style ne fonctionne pas.

Comment dois-je m'y prendre ?

Merci de me répondre

Arkolos · Accepted Answer

C'est bien la propriété document.getElementById("div").style.backgroundColor qui modifie le fond d'une div et pas .background-color. Ca marche mais je voudrait modifier tout le style d'un coup, du genre .style="color:#424242; align:middle; font-style:italic; ". Quelle propriété Javascript permet de faire cela, si elle existe ?

Brachior · Answer

document.getElementById("div").style ne fonctionne pas ? Oo
mais euh moi j'me demande pourquoi tu as ecrit :
document.getElementById("div").style.backgroundColor
au lieu de
document.getElementById("div").style.background-color ?
parce que pour moi backgroundColor n'est pas une commande CSS Oo

juanito · Answer

Aussi:

document.getElementById('XXX').className = "taClasseCSS"

CSS · Answer

Pour lire ou modifier les attributs CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html

CSS · Answer

Pour lire ou modifier les propriétés CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html (mise à jour 02/02/2009).

En résumé :

- Accès/modification des styles inline

IE, opera : x.currentStyle

IE : window.getComputedStyle(x,null).color

W3C : x.style


- Accès aux styles des feuilles de styles

FF, opera : document.styleSheets[1].cssRules[1]

IE : document.styleSheets[1].imports

safari : document.styleSheets[1].rules[1]

document.styleSheets[1]


- Modification des sytles des feuilles de styles

IE, safari : document.styleSheets[1].addRule('pre', 'font: 14px verdana')

FF, safari, opera : document.styleSheets[1].deleteRule(1)

var x = document.styleSheets[1];
x.insertRule('pre {font: 14px verdana}',x.cssRules.length)

document.styleSheets[1].removeRule(1)


- Propriétés

x.style.cssText

document.styleSheets[1].cssText

document.styleSheets[1].cssRules[1].cssText

document.styleSheets[1].cssRules[1].style.cssText

document.styleSheets[1].disabled = true

document.styleSheet[0].href

document.styleSheets[1].cssRules[1].selectorText


- Divers

document.createStyleSheet('extrastyle.css')

document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')

document.getElementById('test').style.getPropertyValue('color')
document.styleSheets[1].cssRules[1].style.getPropertyValue('color')

document.styleSheets[1].ownerNode

document.styleSheets[1].cssRules[1].parentStyleSheet

document.styleSheets[1].cssRules[1].style.removeProperty('color')
document.getElementById('test').style.removeProperty('color')

x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color','#00cc00',null)

Javascript : Changer style css

5 réponses

Newsletters