Rechercher : dans
Par :

Javascript : Changer style css

Dernière réponse le 6 mar 2009 à 12:30:00 Arkolos, le 9 nov 2008 à 14:32:19 
 Signaler ce message aux modérateurs

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

Configuration: Linux Mandriva
Firefox 3.0.3

Meilleures réponses pour « Javascript : Changer style css » dans :

1

Brachior, le 9 nov 2008 à 20:14:20

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

Répondre à Brachior

2

Arkolos, le 11 nov 2008 à 12:09:56

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 ?

Répondre à Arkolos

3

leniko, le 20 jan 2009 à 02:56:36

C'est la commande cssText qui permet de faire ça

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

;-)

Répondre à leniko

4

Arkolos, le 20 jan 2009 à 20:59:20

Merci beaucoup de ta réponse, leniko : cela va me résoudre un sérieux probleme !

Répondre à Arkolos

5

juanito, le 11 fév 2009 à 19:44:13

Aussi:

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

Répondre à juanito

6

CSS, le 6 mar 2009 à 11:58:40

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

Répondre à CSS

7

 CSS, le 6 mar 2009 à 12:30:00
  • +1

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.getPropertyPriorit­y('color')

document.getElementById('test').style.getPropertyValue('colo­r')
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('co­lor')
document.getElementById('test').style.removeProperty('color'­)

x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color­','#00cc00',null)

Répondre à CSS