Modification dynamique de l'attribut de style d'un élément à l'aide de JavaScript

Question

J'ai une certaine feuille de style pour une div. Maintenant je veux modifier un attribut de la div dynamiquement à l'aide de js.

Comment faire ?

document.getElementById("xyz").style.padding-top = "10px";

Est-ce exact ?

Answer 1

En plus des autres réponses, si vous voulez utiliser la notion de tiret pour les propriétés de style, vous pouvez également utiliser :

document.getElementById("xyz").style["padding-top"] = "10px";

Answer 2

C'est presque correct.

Depuis l'entrée en vigueur de la - est un opérateur javascript, vous ne pouvez pas vraiment l'utiliser dans les noms de propriétés. Si vous définissez, border ou quelque chose de semblable, votre code fonctionnera parfaitement.

Cependant, ce qu'il faut retenir pour padding-top et pour tout nom d'attribut avec trait d'union, en javascript, on enlève le trait d'union et on met la lettre suivante en majuscule, donc dans votre cas ce serait paddingTop .

Il existe d'autres exceptions. JavaScript a des mots réservés, vous ne pouvez donc pas mettre float comme cela, par exemple. Au lieu de cela, dans certains navigateurs, vous devez utiliser cssFloat et dans d'autres styleFloat . C'est pour ce genre de divergences qu'il est recommandé d'utiliser un framework tel que jQuery, qui gère les incompatibilités entre les navigateurs pour vous...

Answer 3

J'ai résolu un problème similaire avec :

document.getElementById("xyz").style.padding = "10px 0 0 0";

J'espère que cela vous aidera.

Answer 4

En supposant que vous ayez un code HTML comme celui-ci :

<div id='thediv'></div>

Si vous souhaitez modifier l'attribut style de cette div, vous devez utiliser

document.getElementById('thediv').style[ATTRIBUTE] = '[VALUE]'

Remplacer [ATTRIBUTE] avec l'attribut de style souhaité. N'oubliez pas de supprimer "-" et de mettre la lettre suivante en majuscule.

Exemples

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

Answer 5

document.getElementById("xyz").style.padding-top = '10px';

sera

document.getElementById("xyz").style["paddingTop"] = '10px';