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

117

J'ai une certaine feuille de style pour un div. Maintenant, je veux modifier dynamiquement un attribut de div en utilisant js.

Comment puis-je le faire?

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

Est-ce correct?

javascript html css

— jslearner
source

123

C'est presque correct.

Puisque le -est un opérateur javascript, vous ne pouvez pas vraiment avoir cela dans les noms de propriété. Si vous définissiez, borderou quelque chose d'un seul mot comme ça à la place, votre code fonctionnerait très bien.

Cependant, la chose dont vous devez vous souvenir padding-top, et pour tout nom d'attribut avec trait d'union, est qu'en javascript, vous supprimez le trait d'union et mettez la lettre suivante en majuscule, donc dans votre cas, ce serait le cas paddingTop.

Il y a quelques autres exceptions. JavaScript a des mots réservés, vous ne pouvez donc pas définir floatcomme ça, par exemple. Au lieu de cela, dans certains navigateurs, vous devez utiliser cssFloatet dans d'autres styleFloat. C'est pour des écarts comme celui-ci qu'il est recommandé d'utiliser un framework tel que jQuery, qui gère les incompatibilités de navigateur à votre place ...

— David Hedlund
source

213

En plus d'autres réponses, si vous souhaitez utiliser la notation tiret pour les propriétés de style, vous pouvez également utiliser:

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

— KooiInc
source

3

Moi non plus, c'est vraiment utile pour les fonctions dynamiques, on peut passer le style comme valeur de chaîne, puis définir le style et la valeur. Excellente solution.

— raphie

1

En outre, en ajoutant à ce que dit @raphie, vous pouvez également utiliser document.getElementById("xyz").style["paddingTop"] = '10px'.

— Brosse à dents

1

@anunkjn: vous avez raison. Je dirais que ça ne marche plus dans FF. Ce qui est, bien ... étrange.

— KooiInc

17

Je résous un problème similaire avec:

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

J'espère que cela pourra aider.

— chairul
source

2

L'inconvénient de faire de cette façon est que vous obtenez le rembourrage pour les autres côtés réglé sur 0. Et parfois vous ne le voulez pas.

— Gustavo Straube

17

Il existe également une style.setPropertyfonction:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

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

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

— icl7126
source

15

En supposant que vous ayez du HTML comme celui-ci:

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

Si vous souhaitez modifier l'attribut de style de ce div, vous utiliserez

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

Remplacez [ATTRIBUTE]par 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

— JohnP
source

1

Comme indiqué dans la réponse acceptée, il existe quelques exceptions. Comme float.

— Gustavo Straube

8

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

sera

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

— T.Todua
source

7

Je recommanderais d'utiliser une fonction, qui accepte l'ID d'élément et un objet contenant les propriétés CSS, pour gérer cela. De cette façon, vous écrivez plusieurs styles à la fois et utilisez la syntaxe de propriété CSS standard.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Mieux encore, vous pouvez stocker les styles dans une variable, ce qui facilitera la gestion des propriétés, par exemple

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

J'espère que cela pourra aider

— rjbultitude
source

7

Surpris de ne pas voir la solution de sélection de requête ci-dessous ,

document.querySelector('#xyz').style.paddingTop = "10px"

Solutions CSSStyleDeclaration , un exemple de réponse acceptée

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

— Rama
source

5

document.getElementById("xyz").setAttribute('style','padding-top:10px');

ferait également le travail.

— Pinkesh Badjatiya
source

5

L'inconvénient de cette façon est que vous supprimez tout autre style en ligne. C'est parce que vous remplacez toute la valeur de l'attribut. Je suppose qu'obtenir le style actuel, vérifier une valeur existante pour la propriété que vous souhaitez définir, puis ajouter / remplacer par la valeur souhaitée est une meilleure solution.

— Gustavo Straube

D'accord. Mais l'OP avait besoin d'une solution plus proche de ce qu'il faisait déjà qui ne prenait pas en compte votre cas d'utilisation. C'est l'un des moyens les plus simples d'y parvenir, mais ce n'est certainement pas le meilleur.

— Pinkesh Badjatiya

@GustavoStraube, je n'appellerais pas cela un inconvénient. Dans de nombreux cas, c'est exactement ce que le développeur veut faire - c'est-à-dire écraser le style de l'élément. J'appellerais cela une conséquence de le faire de cette façon.

— stwr667 le

5

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

travaille pour moi

— Hyperion
source