Posez votre question Signaler

Javascript : Changer style css

Arkolos 7Messages postés 9 novembre 2008Date d'inscription 21 novembre 2011Dernière intervention - Dernière réponse le 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
Lire la suite 

Javascript : Changer style css »

8 réponses
Réponse
+2
moins plus
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 ?
leniko - 20 janv. 2009 à 02:56
c'est la commande cssText qui permet de faire ça

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

;-)
Arkolos - 20 janv. 2009 à 20:59
Merci beaucoup de ta réponse, leniko : cela va me résoudre un sérieux probleme !
Ajouter un commentaire
Réponse
+1
moins plus
Aussi:

document.getElementById('XXX').className = "taClasseCSS"
Ajouter un commentaire
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
-1
moins plus
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)
Ajouter un commentaire
Réponse
-3
moins plus
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
schancel- 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
Ajouter un commentaire
Ce document intitulé « Javascript : Changer style css » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?