Come posso impostare più stili CSS in JavaScript?

Ho le seguenti variabili JavaScript:

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

So che posso impostarli sul mio elemento in modo iterativo in questo modo:

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

È possibile metterli tutti insieme in una volta, qualcosa del genere?

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

Se hai i valori CSS come stringa e non ci sono altri CSS già impostati per l'elemento (o non ti interessa la sovrascrittura), usa la cssTextproprietà :

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

Questo è buono in un certo senso in quanto evita di ridipingere l'elemento ogni volta che cambi una proprietà (in qualche modo le cambi tutte in una volta).

Dall'altro lato, dovresti prima costruire la stringa.

Utilizzando Object.assign :

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

Questo ti dà anche la possibilità di unire gli stili, invece di riscrivere lo stile CSS.

Puoi anche creare una funzione di scelta rapida:

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

@Mircea: è molto facile impostare più stili per un elemento in una singola istruzione. Non influisce sulle proprietà esistenti ed evita la complessità di utilizzare loop o plugin.

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

ATTENZIONE: se, in seguito, si utilizza questo metodo per aggiungere o modificare le proprietà di stile, le proprietà precedenti impostate usando 'setAttribute' verranno cancellate.

Crea una funzione per occupartene e passale i parametri con gli stili che vuoi cambiare.

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

e chiamalo così

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

per i valori delle proprietà all'interno di propertyObject è possibile utilizzare le variabili ..

Una libreria JavaScript ti consente di fare queste cose molto facilmente

jQuery

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

Oggetto e for-in-loop

Oppure, un metodo molto più elegante è un oggetto di base e for-loop

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

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

imposta più proprietà di stile CSS in Javascript

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

o

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

Esempio:

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

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

Sono appena inciampato qui e non vedo perché ci sia così tanto codice necessario per raggiungere questo obiettivo.

Aggiungi il tuo codice CSS come stringa.

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

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

a

Puoi avere singole classi nei tuoi file css e quindi assegnare il nome della classe al tuo elemento

oppure puoi scorrere le proprietà degli stili come -

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

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

Non pensare che sia possibile in quanto tale.

Ma potresti creare un oggetto fuori dalle definizioni di stile e semplicemente passarci attraverso.

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

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

Per sviluppare ulteriormente, crearne una funzione:

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

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

Utilizzando Javascript semplice, non è possibile impostare tutti gli stili contemporaneamente; devi usare linee singole per ognuna di esse.

Tuttavia, non è necessario ripetere più volte il document.getElementById(...).style.codice; crea una variabile oggetto per farne riferimento e renderai il tuo codice molto più leggibile:

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

...eccetera. Molto più facile da leggere rispetto al tuo esempio (e francamente, altrettanto facile da leggere come l'alternativa jQuery).

(se Javascript fosse stato progettato correttamente, avresti potuto usare anche la withparola chiave, ma è meglio lasciarla sola, poiché può causare alcuni problemi di spazio dei nomi)

La tua scommessa migliore potrebbe essere quella di creare una funzione che imposta gli stili da solo:

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

Nota che dovrai comunque usare i nomi delle proprietà compatibili con javascript (quindi backgroundColor)

Vedi per ... in

Esempio:

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

Questo è un vecchio thread, quindi ho pensato a chiunque cerchi una risposta moderna, suggerirei di usare 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);

Ci sono scenari in cui l'uso di CSS insieme a JavaScript potrebbe avere più senso con un simile problema. Dai un'occhiata al seguente codice:

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

Questo passa semplicemente tra le classi CSS e risolve tanti problemi legati agli stili di override. Rende anche il tuo codice più ordinato.

È possibile scrivere una funzione che imposterà le dichiarazioni singolarmente per non sovrascrivere le dichiarazioni esistenti che non vengono fornite. Supponiamo che tu abbia questo elenco di parametri delle dichiarazioni:

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

Potresti scrivere una funzione simile a questa:

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

che accetta un elemente un objectelenco di proprietà delle dichiarazioni di stile da applicare a quell'oggetto. Ecco un esempio di utilizzo:

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

Penso che sia un modo molto semplice per quanto riguarda tutte le soluzioni sopra:

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

Utilizzare il CSSStyleDeclaration.setProperty()metodo all'interno Object.entriesdell'oggetto of styles.
Con questo possiamo anche impostare la priorità ("importante") per la proprietà CSS.
Useremo i nomi delle proprietà 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>

Il seguente innerHtml è valido

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 + puoi usare anche i backtick e persino copiare i CSS direttamente da qualche parte:

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>

Possiamo aggiungere la funzione di stili al prototipo del nodo:

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

Quindi, chiama semplicemente il metodo styles su qualsiasi nodo:

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

Conserverà tutti gli altri stili esistenti e sovrascriverà i valori presenti nel parametro oggetto.