Comment puis-je définir plusieurs styles CSS dans JavaScript?

J'ai les variables JavaScript suivantes:

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

Je sais que je peux les définir sur 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 à la fois, quelque chose comme ça?

document.getElementById("myElement").style = allMyStyle 

Si vous avez les valeurs CSS sous forme de chaîne et qu'aucun autre CSS n'est déjà défini pour l'élément (ou que vous ne vous souciez pas de l'écrasement), utilisez la cssTextpropriété :

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

C'est bien dans un sens car cela évite de repeindre l'élément à chaque fois que vous modifiez une propriété (vous les changez tous "à la fois" d'une manière ou d'une autre).

De l'autre côté, vous devrez d'abord créer la chaîne.

En utilisant Object.assign :

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

Cela vous donne également la possibilité de fusionner les 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);
}

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

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

ATTENTION: si, plus tard, 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.

Créez une fonction pour vous en occuper 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 appelle ça 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.

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 une boucle for

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

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

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");

Je viens de trébucher 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('*').style = styles

a

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

ou vous pouvez parcourir les propriétés des styles comme -

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

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

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 simplement 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-lui une fonction:

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

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

En utilisant du Javascript brut, vous ne pouvez pas définir tous les styles à la fois; vous devez utiliser des lignes uniques pour chacun d'eux.

Cependant, vous n'avez pas à répéter le document.getElementById(...).style.code encore et encore; créez une variable 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 pu également utiliser le withmot - clé, mais il vaut mieux le laisser seul, car cela peut causer des problèmes d'espace de noms désagréables)

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

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és compatibles javascript (d'où backgroundColor)

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];
}

C'est un vieux fil, donc j'ai pensé que pour tous ceux qui recherchent 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);

Il existe des scénarios où l'utilisation de CSS avec javascript pourrait avoir plus de sens avec un tel problème. Jetez un œil au 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é.

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. Disons que vous avez cette liste de paramètres d'objet de déclarations:

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 elementet une objectliste de propriétés 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'});

Je pense que c'est un moyen 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;
});

Utilisez la CSSStyleDeclaration.setProperty()méthode à l'intérieur de l' Object.entriesobjet de styles.
Nous pouvons également définir la priorité ("important") pour la propriété CSS avec ceci.
Nous utiliserons des noms de propriétés CSS "hypen-case".

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

<div id="my_div"> Hello </div>

Le fichier innerHtml ci-dessous est-il valide?

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

Avec ES6 +, vous pouvez également utiliser des backticks et même copier le css directement de quelque part:

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

Nous pouvons ajouter une fonction de styles au prototype Node:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

Ensuite, appelez simplement la méthode styles sur n'importe quel nœud:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

Il conservera tous les autres styles existants et écrasera les valeurs présentes dans le paramètre d'objet.