¿Cómo puedo configurar varios estilos CSS en JavaScript?

Tengo las siguientes variables de JavaScript:

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

Sé que puedo configurarlos en mi elemento de forma iterativa así:

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

¿Es posible ponerlos todos juntos a la vez, algo como esto?

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

Si tiene los valores CSS como cadena y no hay otro CSS ya establecido para el elemento (o no le importa sobrescribir), utilice la cssTextpropiedad :

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

Esto es bueno en cierto sentido, ya que evita volver a pintar el elemento cada vez que cambia una propiedad (las cambia todas "de una vez" de alguna manera).

Por otro lado, primero tendría que construir la cadena.

Usando Object.assign :

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

Esto también le brinda la capacidad de fusionar estilos, en lugar de reescribir el estilo CSS.

También puede hacer una función de acceso directo:

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

@Mircea: Es muy fácil configurar los múltiples estilos para un elemento en una sola declaración. No afecta las propiedades existentes y evita la complejidad de buscar bucles o complementos.

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

TENGA CUIDADO: si más adelante usa este método para agregar o alterar propiedades de estilo, se borrarán las propiedades anteriores establecidas mediante 'setAttribute'.

Haga una función para cuidarlo y pase los parámetros con los estilos que desea cambiar.

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

y llamarlo así

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

para los valores de las propiedades dentro del objeto de propiedad puede usar variables.

Una biblioteca de JavaScript le permite hacer estas cosas muy fácilmente.

jQuery

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

Objeto y un for-in-loop

O, un método mucho más elegante es un objeto básico y for-loop

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

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

establecer múltiples propiedades de estilo CSS en Javascript

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

o

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

Ejemplo:

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

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

Acabo de tropezar aquí y no veo por qué se requiere tanto código para lograr esto.

Agregue su código CSS como una cadena.

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

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

a

Puede tener clases individuales en sus archivos css y luego asignar el nombre de clase a su elemento

o puede recorrer las propiedades de los estilos como:

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

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

No pienses que es posible como tal.

Pero podría crear un objeto a partir de las definiciones de estilo y simplemente recorrerlas.

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

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

Para desarrollar más, haga una función para ello:

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

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

Usando Javascript simple, no puede configurar todos los estilos a la vez; necesitas usar líneas individuales para cada una de ellas.

Sin embargo, no tiene que repetir el document.getElementById(...).style.código una y otra vez; cree una variable de objeto para hacer referencia a ella, y hará que su código sea mucho más legible:

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

... etc. Mucho más fácil de leer que su ejemplo (y, francamente, tan fácil de leer como la alternativa jQuery).

(si Javascript se hubiera diseñado correctamente, también podría haber usado la withpalabra clave, pero es mejor dejarlo solo, ya que puede causar algunos problemas desagradables en el espacio de nombres)

Su mejor opción puede ser crear una función que establezca estilos por su cuenta:

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

Tenga en cuenta que aún tendrá que usar los nombres de propiedad compatibles con javascript (por lo tanto backgroundColor)

Ver para ... en

Ejemplo:

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 es un hilo viejo, así que pensé que para cualquiera que buscara una respuesta moderna, sugeriría 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);

Hay escenarios en los que usar CSS junto con javascript podría tener más sentido con este problema. Echa un vistazo al siguiente código:

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

Esto simplemente cambia entre clases CSS y resuelve muchos problemas relacionados con la anulación de estilos. Incluso hace que su código sea más ordenado.

Puede escribir una función que establezca declaraciones individualmente para no sobrescribir ninguna declaración existente que no proporcione. Digamos que tiene esta lista de declaraciones de parámetros de objeto:

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

Puede escribir una función que se vea así:

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

que toma una elementy una objectlista de propiedades de declaraciones de estilo para aplicar a ese objeto. Aquí hay un ejemplo 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'});

Creo que es una forma muy simple con respecto a todas las soluciones anteriores:

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

Utilice el CSSStyleDeclaration.setProperty()método dentro Object.entriesdel objeto de estilos.
También podemos establecer la prioridad ("importante") para la propiedad CSS con esto.
Usaremos nombres de propiedades 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>

¿Es válido el siguiente innerHtml?

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

Con ES6 + puedes usar también backticks e incluso copiar el CSS directamente desde algún 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 agregar la función de estilos al prototipo de nodo:

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

Luego, simplemente llame al método de estilos en cualquier nodo:

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

Conservará cualquier otro estilo existente y sobrescribirá los valores presentes en el parámetro del objeto.