web-dev-qa-db-fra.com

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

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

Comment puis-je le faire?

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

Est-ce correct?

javascripthtmlcss
102
jslearner

C'est presque correct.

Comme le - est un opérateur javascript, vous ne pouvez pas vraiment avoir cela dans les noms de propriétés. Si vous définissiez border ou quelque chose de simple comme cela, votre code fonctionnerait parfaitement.

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

Il y a quelques autres exceptions. JavaScript a des mots réservés, vous ne pouvez donc pas définir float comme ça, par exemple. Dans certains navigateurs, vous devez utiliser cssFloat et dans d’autres styleFloat. C'est pour des divergences comme celle-ci qu'il est recommandé d'utiliser un framework tel que jQuery, qui gère les incompatibilités de navigateur pour vous ...

117
David Hedlund

Outre d’autres réponses, si vous souhaitez utiliser la notition de tiret pour les propriétés de style, vous pouvez également utiliser:

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

Je résous le problème similaire avec:

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

J'espère que ça t'as aidé.

15
chairul

En supposant que vous ayez du HTML comme ceci:

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

Si vous voulez modifier l'attribut style de cette div, vous utiliseriez

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
12
JohnP
document.getElementById("xyz").style.padding-top = '10px';

sera

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

Il y a aussi la fonction style.setProperty:
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');
6
icl7126

Je recommanderais d'utiliser une fonction, qui accepte l'identifiant de l'é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 standard des propriétés CSS.

//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 grandement la gestion des propriétés, par exemple.

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

J'espère que ça t'as aidé

5
rjbultitude

Surprise que je n'ai pas vu le sélecteur de requête ci-dessous ,

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

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

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

ferait aussi le travail.

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

travaille pour moi

2
Hyperion