Javascript : Changer style css

Fermé
Arkolos
Messages postés
9
Date d'inscription
dimanche 9 novembre 2008
Statut
Membre
Dernière intervention
5 mars 2009
- 9 nov. 2008 à 14:32
schancel
Messages postés
296
Date d'inscription
dimanche 20 mars 2011
Statut
Membre
Dernière intervention
7 décembre 2018
- 18 sept. 2011 à 13:55
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
A voir également:

5 réponses

Arkolos
Messages postés
9
Date d'inscription
dimanche 9 novembre 2008
Statut
Membre
Dernière intervention
5 mars 2009
7
11 nov. 2008 à 12:09
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 ?
5
c'est la commande cssText qui permet de faire ça

document.getElementById('XXX').style.cssText='text-underline:none; color:red; letter-spacing:1px;';

;-)
0
Arkolos > leniko
20 janv. 2009 à 20:59
Merci beaucoup de ta réponse, leniko : cela va me résoudre un sérieux probleme !
0
Aussi:

document.getElementById('XXX').className = "taClasseCSS"
4
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
3
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)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Brachior
Messages postés
613
Date d'inscription
dimanche 21 octobre 2007
Statut
Membre
Dernière intervention
22 juin 2009
46
9 nov. 2008 à 20:14
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
-3
schancel
Messages postés
296
Date d'inscription
dimanche 20 mars 2011
Statut
Membre
Dernière intervention
7 décembre 2018
48
18 sept. 2011 à 13:55
en javascript les propriéte css qui comporte des tirets sont remplacer
soit le mots qui suit le tiret devient majuscule exple: backgound-color devient backgroundColor
0