Javascript : Changer style css

Arkolos Messages postés 9 Date d'inscription Statut Membre Dernière intervention -
schancel Messages postés 296 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Changer css avec javascript
Changer dns - Guide
Changer carte graphique - Guide
Changer wifi chromecast - Guide
Changer extension fichier - Guide
Changer clavier qwerty en azerty - Guide

5 réponses

Réponse 1 / 5

Arkolos Messages postés 9 Date d'inscription Statut Membre Dernière intervention 7

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

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

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

;-)

Arkolos > leniko

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

Réponse 4 / 5

CSS

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)

Réponse 5 / 5

Brachior Messages postés 613 Date d'inscription Statut Membre Dernière intervention 46

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 Messages postés 296 Date d'inscription Statut Membre Dernière intervention 49

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

Discussions similaires

masquer/afficher Div avec CSS sans JS

[JAVASCRIPT] Changer de feuille de style CSS

compteur de visites en html...

html Afficher/cacher une DIV sur clique <a>

Barre de recherche en html externe

CSS/Ajustement auto d'un site à taille écran

Votre réponse

Discussions similaires