web-dev-qa-db-fra.com

Comment définir plusieurs styles CSS en JavaScript?

J'ai les variables JavaScript suivantes:

var fontsize = "12px"
var left= "200px"
var top= "100px"

Je sais que je peux les placer dans mon élément de manière itérative comme ceci:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

Est-il possible de les mettre tous ensemble en même temps, quelque chose comme ça?

document.getElementById("myElement").style = allMyStyle
javascriptcoding-style
140
Mircea

Si vous avez les valeurs CSS sous forme de chaîne et qu'il n'y a pas d'autre CSS déjà défini pour l'élément (ou que vous ne vous souciez pas de remplacer), utilisez la propriété cssText :

document.getElementById("myElement").style.cssText = cssString;

C’est bien dans un sens, car cela évite de repeindre l’élément à chaque fois que vous modifiez une propriété (vous les modifiez tous "en même temps" d’une manière ou d’une autre).

De l'autre côté, vous devriez d'abord construire la chaîne.

199
Felix Kling

Utilisation de Object.assign :

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

Cela vous donne également la possibilité de fusionner des styles, au lieu de réécrire le style CSS.

Vous pouvez également créer une fonction de raccourci:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}
219
Laimis

@Mircea: Il est très facile de définir plusieurs styles pour un élément dans une seule instruction . Cela n'affecte pas les propriétés existantes et évite la complexité liée à la recherche de boucles ou de plugins.

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

ATTENTION: Si, par la suite, vous utilisez cette méthode pour ajouter ou modifier des propriétés de style, les propriétés précédentes définies à l'aide de 'setAttribute' seront effacées.

44
SHANK

Créez une fonction pour en prendre soin et transmettez-lui les paramètres avec les styles que vous souhaitez modifier.

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

et l'appelle comme ça

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

pour les valeurs des propriétés à l'intérieur de propertyObject, vous pouvez utiliser des variables.

36
Gabriele Petrioli

Une bibliothèque JavaScript vous permet de faire ces choses très facilement

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

Objet et une boucle for-in

Ou, une méthode beaucoup plus élégante est un objet de base et pour la boucle

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}
13
Harmen

définir plusieurs propriétés de style css en Javascript 

document.getElementById("yourElement").style.cssText = cssString;

ou 

document.getElementById("yourElement").setAttribute("style",cssString);

Exemple:

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
12
eyupgevenim

Je suis juste tombé par hasard ici et je ne vois pas pourquoi il faut tant de code pour y parvenir.

Ajoutez votre code CSS sous forme de chaîne.

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('div').style = styles
<div>a</div>

8
Thielicious

Vous pouvez avoir des classes individuelles dans vos fichiers css puis assigner le nom de la classe à votre élément 

ou vous pouvez parcourir les propriétés des styles en tant que -

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}
3
Sachin Shanbhag

Ne pensez pas que c'est possible en tant que tel.

Mais vous pouvez créer un objet à partir des définitions de style et les parcourir en boucle. 

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

Pour développer davantage, faites une fonction pour cela:

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);
2
nnevala

En utilisant du Javascript simple, vous ne pouvez pas définir tous les styles à la fois; vous devez utiliser des lignes simples pour chacune d’elles.

Cependant, vous n'avez pas à répéter le code document.getElementById(...).style. plusieurs fois; créez une variable d'objet pour la référencer, et vous rendrez votre code beaucoup plus lisible:

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...etc. Beaucoup plus facile à lire que votre exemple (et franchement, tout aussi facile à lire que l’alternative jQuery).

(si Javascript avait été conçu correctement, vous auriez également pu utiliser le mot clé with, mais il est préférable de le laisser seul, car cela peut causer des problèmes désagréables d'espace de noms)

2
Spudley

Voir pour .. dans

Exemple:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}
1
Onkelborg

Ceci est un vieux fil, alors je me suis dit que pour ceux qui cherchent une réponse moderne, je suggérerais d'utiliser Object.keys ();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);
1
dragonore

Votre meilleur pari peut être de créer une fonction qui définit les styles par vous-même:

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

Notez que vous devrez toujours utiliser les noms de propriété compatibles javascript (donc backgroundColor)

1
Ryan Kinal

Je pense que ceci est une manière très simple en ce qui concerne toutes les solutions ci-dessus:

const Elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  Elm.style[prop] = value;
});
0
Jalal

Avec Zam vous le feriez comme ça

zam.css({'font-size':'12px','left':'200px','top':'100px'}, '#myElement');
0
Roecrew

Vous pouvez écrire une fonction qui définira les déclarations individuellement afin de ne pas écraser les déclarations existantes que vous ne fournissez pas. Supposons que vous ayez cette liste de déclarations de paramètres d'objet:

const myStyles = {
  'background-color': 'Magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

Vous pourriez écrire une fonction qui ressemble à ceci:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

qui prend une element et une object propriété liste de déclarations de style à appliquer à cet objet. Voici un exemple d'utilisation:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});


// styles to apply
const myStyles = {
  'background-color': 'Magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});

0
jsejcksn

Il existe des scénarios dans lesquels l’utilisation de CSS à côté de javascript serait plus logique avec un tel problème. Regardez le code suivant: 

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

Cela bascule simplement entre les classes CSS et résout de nombreux problèmes liés aux styles de remplacement. Cela rend même votre code plus ordonné.

0
che-azeh