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

Si vous avez le CSS valeurs en tant que chaîne et il n'y a pas d'autre CSS déjà défini pour l'élément (ou vous ne se soucient pas de les écraser), faire usage de la cssText de la propriété:

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

Ce qui est bon dans un sens qu'il évite de repeindre l'élément chaque fois que vous modifiez une propriété (à vous de les changer tous les "à la fois" en quelque sorte).

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

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

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

ÊTRE PRUDENT: Si, plus tard, vous utilisez cette méthode pour ajouter ou modifier des propriétés de style, le précédent jeu de propriétés à l'aide de 'setAttribute" sera effacé.

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

jQuery

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

Objet et un pour-en-boucle

Ou, beaucoup plus élégant méthode est un objet de base & pour boucle

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

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

Je suis tombé par hasard ici et je ne vois pas pourquoi il y a autant de code requis pour atteindre cet objectif.

Ajouter votre code CSS comme une chaîne de caractères.

JS:

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

document.querySelector('div').style = styles

HTML:

<div>a</div>

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

Mais vous pouvez créer un objet en dehors de la définition des styles et juste de la boucle à travers eux.

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

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

De développer davantage, de faire une fonction pour ça:

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

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

Votre meilleur pari pourrait être de créer une fonction qui définit des styles sur votre propre:

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

Noter que vous devrez toujours utiliser le javascript compatible avec les noms de propriété (d'où backgroundColor)

C'est vieux thread, j'ai donc pensé pour ceux qui cherchent une réponse moderne, je dirais à l'aide de l'Objet.les touches();

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

Vous pouvez écrire une fonction qui permettra de définir les déclarations individuellement afin de ne pas remplacer les déclarations que vous n'avez pas d'alimentation. Disons que vous avez ce paramètre de l'objet liste des 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 pouvez écrire une fonction qui ressemble à ceci:

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

qui prend un element et un object propriété de la liste des 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'});

JS:

//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'});

Nous pouvons ajouter des styles de la fonction de Nœud de prototype:

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

Ensuite, il suffit d'appeler les styles de méthode sur n'importe quel Nœud:

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

Il permettra de préserver à tout les autres styles existants et les remplacer les valeurs présentes dans le paramètre de l'objet.

<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>