Como posso definir vários estilos CSS em JavaScript?

Eu tenho as seguintes variáveis ​​JavaScript:

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

Eu sei que posso configurá-los para o meu elemento iterativamente assim:

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

É possível reuni-los todos de uma vez, algo assim?

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

Se você tiver os valores CSS como string e ainda não houver outro CSS definido para o elemento (ou você não se importa com a substituição), use a cssTextpropriedade :

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

Isso é bom em certo sentido, pois evita repintar o elemento toda vez que você altera uma propriedade (você altera todos eles "de uma só vez" de alguma forma).

Por outro lado, você teria que construir a string primeiro.

Usando Object.assign :

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

Isso também permite mesclar estilos, em vez de reescrever o estilo CSS.

Você também pode criar uma função de atalho:

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

@ Mircea: É muito fácil definir os vários estilos para um elemento em uma única declaração. Não afeta as propriedades existentes e evita a complexidade de ir para loops ou plugins.

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

CUIDADO: Se, posteriormente, você usar esse método para adicionar ou alterar propriedades de estilo, as propriedades anteriores definidas usando 'setAttribute' serão apagadas.

Crie uma função para cuidar dela e passe parâmetros com os estilos que você deseja alterar.

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

e chame assim

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

para os valores das propriedades dentro do propertyObject, você pode usar variáveis.

Uma biblioteca JavaScript permite que você faça essas coisas com muita facilidade

jQuery

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

Objeto e um for-in-loop

Ou, um método muito mais elegante é um objeto básico e um loop for

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

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

definir várias propriedades de estilo css em Javascript

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

ou

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

Exemplo:

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

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

Apenas entrei aqui e não vejo por que há tanto código necessário para conseguir isso.

Adicione seu código CSS como uma string.

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

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

a

Você pode ter classes individuais em seus arquivos css e atribuir o nome da classe ao seu elemento

ou você pode percorrer propriedades de estilos como -

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

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

Não pense que é possível como tal.

Mas você pode criar um objeto a partir das definições de estilo e apenas percorrê-las.

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

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

Para desenvolver ainda mais, faça uma função para isso:

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

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

Usando Javascript simples, você não pode definir todos os estilos de uma só vez; você precisa usar linhas únicas para cada uma delas.

No entanto, você não precisa repetir o document.getElementById(...).style.código repetidamente; crie uma variável de objeto para fazer referência a ela, e você tornará seu código muito mais legível:

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

... etc Muito mais fácil de ler do que o seu exemplo (e, francamente, tão fácil de ler quanto a alternativa do jQuery).

(se o Javascript tiver sido projetado corretamente, você também poderá ter usado a withpalavra - chave, mas é melhor deixar em branco, pois isso pode causar alguns problemas desagradáveis ​​no espaço para nome)

Sua melhor aposta pode ser criar uma função que defina estilos por conta própria:

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

Observe que você ainda precisará usar os nomes de propriedades compatíveis com javascript (portanto backgroundColor)

Veja para .. em

Exemplo:

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

Este é um tópico antigo, então, para quem procura uma resposta moderna, sugiro usar 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);

Existem cenários em que o uso de CSS ao lado de javascript pode fazer mais sentido com esse problema. Dê uma olhada no seguinte código:

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

Isso simplesmente alterna entre classes CSS e resolve muitos problemas relacionados a estilos de substituição. Ele ainda torna seu código mais organizado.

Você pode escrever uma função que definirá declarações individualmente para não sobrescrever nenhuma declaração existente que você não forneça. Digamos que você tenha esta lista de parâmetros do objeto de declarações:

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

Você pode escrever uma função que se parece com isso:

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

que usa uma elemente uma objectlista de propriedades de declarações de estilo para aplicar a esse objeto. Aqui está um exemplo de uso:

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

Eu acho que é uma maneira muito simples com relação a todas as soluções acima:

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

Use o CSSStyleDeclaration.setProperty()método dentro Object.entriesdo objeto de estilos.
Também podemos definir a prioridade ("importante") da propriedade CSS com isso.
Usaremos nomes de propriedades 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>

O innerHtml abaixo é válido

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

Com o ES6 +, você também pode usar backticks e até copiar o css diretamente de algum lugar:

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>

Podemos adicionar a função de estilos ao protótipo do Node:

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

Em seguida, basta chamar o método de estilos em qualquer Nó:

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

Ele preservará qualquer outro estilo existente e substituirá os valores presentes no parâmetro do objeto.