Wie kann ich mehrere CSS-Stile in JavaScript festlegen?

Ich habe die folgenden JavaScript-Variablen:

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

Ich weiß, dass ich sie iterativ wie folgt auf mein Element setzen kann:

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

Ist es möglich, sie alle auf einmal zusammenzusetzen, so etwas?

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

Wenn Sie die CSS-Werte als Zeichenfolge haben und für das Element noch kein anderes CSS festgelegt ist (oder Sie sich nicht für das Überschreiben interessieren), verwenden Sie die cssTextEigenschaft :

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

Dies ist in gewissem Sinne gut, da vermieden wird, dass das Element jedes Mal neu gestrichen wird, wenn Sie eine Eigenschaft ändern (Sie ändern sie alle irgendwie "auf einmal").

Auf der anderen Seite müssten Sie zuerst die Zeichenfolge erstellen.

Verwenden von Object.assign :

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

Auf diese Weise können Sie auch Stile zusammenführen, anstatt den CSS-Stil neu zu schreiben.

Sie können auch eine Verknüpfungsfunktion erstellen:

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

@Mircea: Es ist sehr einfach, mehrere Stile für ein Element in einer einzelnen Anweisung festzulegen. Dies wirkt sich nicht auf die vorhandenen Eigenschaften aus und vermeidet die Komplexität von Loops oder Plugins.

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

VORSICHT: Wenn Sie diese Methode später zum Hinzufügen oder Ändern von Stileigenschaften verwenden, werden die vorherigen Eigenschaften, die mit 'setAttribute' festgelegt wurden, gelöscht.

Erstellen Sie eine Funktion, um sich darum zu kümmern, und übergeben Sie die Parameter mit den Stilen, die Sie ändern möchten.

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

und nenne es so

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

Für die Werte der Eigenschaften im propertyObject können Sie Variablen verwenden.

Mit einer JavaScript-Bibliothek können Sie diese Dinge sehr einfach erledigen

jQuery

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

Objekt und eine For-in-Schleife

Oder eine viel elegantere Methode ist ein grundlegendes Objekt und eine for-Schleife

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

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

Legen Sie mehrere CSS-Stileigenschaften in Javascript fest

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

oder

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

Beispiel:

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

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

Ich bin gerade hier reingestolpert und verstehe nicht, warum so viel Code erforderlich ist, um dies zu erreichen.

Fügen Sie Ihren CSS-Code als Zeichenfolge hinzu.

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

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

a

Sie können einzelne Klassen in Ihren CSS-Dateien haben und dann Ihrem Element den Klassennamen zuweisen

oder Sie können die Eigenschaften von Stilen wie folgt durchlaufen:

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

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

Glaube nicht, dass es als solches möglich ist.

Sie können jedoch ein Objekt aus den Stildefinitionen erstellen und diese einfach durchlaufen.

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

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

Um sich weiterzuentwickeln, machen Sie eine Funktion dafür:

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

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

Mit einfachem Javascript können Sie nicht alle Stile gleichzeitig festlegen. Sie müssen für jede einzelne Zeile einzelne Zeilen verwenden.

Sie müssen den document.getElementById(...).style.Code jedoch nicht immer wieder wiederholen . Wenn Sie eine Objektvariable erstellen, um darauf zu verweisen, wird Ihr Code viel lesbarer:

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

...etc. Viel einfacher zu lesen als Ihr Beispiel (und ehrlich gesagt genauso einfach zu lesen wie die jQuery-Alternative).

(Wenn Javascript richtig entworfen worden wäre, hätten Sie auch das withSchlüsselwort verwenden können, aber das sollte am besten in Ruhe gelassen werden, da es einige böse Namespace-Probleme verursachen kann.)

Am besten erstellen Sie eine Funktion, mit der Sie Stile selbst festlegen können:

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

Beachten Sie, dass Sie weiterhin die Javascript-kompatiblen Eigenschaftsnamen verwenden müssen (daher backgroundColor)

Siehe für .. in

Beispiel:

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

Dies ist ein alter Thread, daher habe ich für jeden, der nach einer modernen Antwort sucht, die Verwendung von Object.keys () vorgeschlagen.

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

Es gibt Szenarien, in denen die Verwendung von CSS neben Javascript bei einem solchen Problem möglicherweise sinnvoller ist. Sehen Sie sich den folgenden Code an:

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

Dies wechselt einfach zwischen CSS-Klassen und löst so viele Probleme im Zusammenhang mit überschreibenden Stilen. Es macht Ihren Code sogar aufgeräumter.

Sie können eine Funktion schreiben, mit der Deklarationen einzeln festgelegt werden, um vorhandene Deklarationen, die Sie nicht angeben, nicht zu überschreiben. Angenommen, Sie haben diese Objektparameterliste mit Deklarationen:

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

Sie könnten eine Funktion schreiben, die so aussieht:

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

Dies erfordert eine elementund eine objectEigenschaftsliste von Stildeklarationen, die auf dieses Objekt angewendet werden sollen. Hier ist ein Anwendungsbeispiel:

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

Ich denke, dies ist ein sehr einfacher Weg in Bezug auf alle oben genannten Lösungen:

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

Verwenden Sie die CSSStyleDeclaration.setProperty()Methode innerhalb Object.entriesdes Objekts of styles.
Damit können wir auch die Priorität ("wichtig") für die CSS-Eigenschaft festlegen.
Wir werden CSS-Eigenschaftsnamen "Hypen-Case" verwenden.

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>

Ist das unten stehende innerHtml gültig?

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

Mit ES6 + können Sie auch Backticks verwenden und das CSS sogar direkt von irgendwoher kopieren:

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>

Wir können dem Node-Prototyp eine Styles-Funktion hinzufügen:

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

Rufen Sie dann einfach die Styles-Methode auf einem beliebigen Knoten auf:

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

Alle anderen vorhandenen Stile und Überschreibungswerte, die im Objektparameter vorhanden sind, bleiben erhalten.