CSS-Eigenschaft in Javascript festlegen?

160

Ich habe folgendes erstellt ...

var menu = document.createElement('select');

Wie würde ich jetzt zB CSS-Attribute einstellen width: 100px?

javascript css Skizit
quelle

251

Verwendung element.style:

var element = document.createElement('select');
element.style.width = "100px";

KJYe.Name 葉家仁
quelle

14

Was ist mit den inoffiziellen wie -webkit-background-size? Gibt es eine Möglichkeit, diese mit einfachen js festzulegen, oder müssen wir jQuery verwenden?

Luke

60

@ Luke obj.style ["- Webkit-Hintergrundgröße"] = "400px"

Daniel X Moore

Dadurch wird das Element tatsächlich im Element und nicht im Stylesheet formatiert.

Aft3rL1f3

56

Stellen Sie einfach Folgendes ein style:

var menu = document.createElement("select");
menu.style.width = "100px";

Wenn Sie möchten, können Sie auch jQuery verwenden :

$(menu).css("width", "100px");

djdd87
quelle

5

@Sime - Meine Zitate sind nicht inkonsistent. Ich verwende immer doppelte Anführungszeichen für JS, da dies der Standard bei der Arbeit ist. Wie auch immer, die erste Zeile hatte einfache Anführungszeichen, als ich sie aus der OP-Frage kopierte. Jetzt sowieso korrigiert.

djdd87

1

Nun, sie sind jetzt in Ordnung, aber sie waren zum Zeitpunkt meines Kommentars inkonsistent:)

Šime Vidas

2

@Sime - Ich habe Folgendes bestätigt: "Wie auch immer, die erste Zeile hatte einfache Anführungszeichen, als ich sie aus der OP-Frage kopierte. Jetzt sowieso korrigiert."

djdd87

35

Für die meisten Stile tun Sie dies:

var obj = document.createElement('select');
obj.style.width= "100px";

Führen Sie für Stile mit Bindestrichen im Namen stattdessen Folgendes aus:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

Daniel X Moore
quelle

17

Mit Vanille-JavaScript ist das eigentlich ganz einfach:

menu.style.width = "100px";

Justin Niessner
quelle

14

In allen Antworten erfahren Sie, wie Sie das tun, was Sie gefragt haben. Ich würde jedoch empfehlen, JavaScript zu verwenden, um eine Klasse für das Element festzulegen und es mithilfe von CSS zu formatieren. Auf diese Weise behalten Sie die richtige Trennung zwischen Verhalten und Stil bei.

Stellen Sie sich vor, Sie hätten einen Designer, der die Site neu gestaltet ... er sollte in der Lage sein, ausschließlich in CSS zu arbeiten, ohne mit Ihrem JavaScript arbeiten zu müssen.

Im Prototyp würde ich tun:

$(newElement).addClassName('blah')

Nick
quelle

1

+1 von mir - viel einfacher / sauberer, um Ihr gesamtes CSS getrennt zu halten.

Ian Oxley

1

jQuery-Version davon als Referenz ...$(selector).addClass('blah')

zgr024

8

Nur für Leute, die 2018 das Gleiche tun wollen

Sie können Ihrem Element eine benutzerdefinierte CSS-Eigenschaft zuweisen (über CSS oder JS) und diese ändern:

Aufgabe durch CSS:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

Zuordnung durch JS

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

Holen Sie sich den Eigenschaftswert über JS

ELEMENT.style.getPropertyValue('--element-width');

Hier nützliche Links:

Mattia Astorino
quelle

6

Beim Debuggen möchte ich in der Lage sein, eine Reihe von CSS-Attributen in einer Zeile hinzuzufügen:

menu.style.cssText = 'width: 100px';

Wenn Sie sich an diesen Stil gewöhnt haben, können Sie eine Reihe von CSS in einer Zeile wie folgt hinzufügen:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

eine Fabel
quelle

5

Wenn Sie eine globale Eigenschaft hinzufügen möchten, können Sie Folgendes verwenden:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

Hetdev
quelle

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

Mohsin Khan
quelle

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

Mohsin Khan
quelle

1

Dies funktioniert gut mit den meisten CSS-Eigenschaften, wenn sie keine Bindestriche enthalten.

var element = document.createElement('select');
element.style.width = "100px";

Objekte mit Bindestrichen in ihnen wie max-width, sollten Sie wandeln die sausage-casezucamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

Daut
quelle

0

Es ist wichtig zu verstehen, dass der folgende Code nicht das Stylesheet, sondern das DOM ändert:

document.getElementById("p2").style.color = "blue";

Das DOM speichert einen berechneten Wert der Stylesheet-Elementeigenschaften. Wenn Sie einen Elementstil mithilfe von Javascript dynamisch ändern, ändern Sie das DOM. Dies ist wichtig zu beachten und zu verstehen, da die Art und Weise, wie Sie Ihren Code schreiben, Ihre Dynamik beeinflussen kann. Wenn Sie versuchen, Werte zu erhalten, die nicht direkt in das Element selbst geschrieben wurden, wie z.

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... geben Sie einen undefinierten Wert zurück, der in der Variablen 'propertyValue' des Codebeispiels gespeichert wird. Wenn Sie mit dem Abrufen und Festlegen von Eigenschaften arbeiten, die in ein CSS-Stylesheet geschrieben wurden, und eine EINZELNE FUNKTION wünschen , die in dieser Situation, in der dies sehr häufig vorkommt, Stileigenschaftswerte erhält und festlegt, dann müssen Sie JQuery verwenden.

$(selector).css(property,value)

Der einzige Nachteil ist, dass Sie JQuery kennengelernt haben, aber dies ist ehrlich gesagt einer der vielen guten Gründe, warum jeder Javascript-Entwickler JQuery lernen sollte. Wenn Sie eine CSS-Eigenschaft erhalten möchten, die aus einem Stylesheet in reinem JavaScript berechnet wurde, müssen Sie diese verwenden.

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

Der Nachteil dieser Methode ist, dass die Methode getComputedValue nur abgerufen wird, nicht festgelegt wird. Mozillas Übernahme berechneter Werte Dieser Link geht ausführlicher auf das ein, was ich hier angesprochen habe. Hoffe das hilft jemandem !!!

Aft3rL1f3
quelle

Ich denke, Ihrem ersten Codeblock fehlt der Inhalt?

zb226

1

Dort ist es behoben

Aft3rL1f3

CSS-Eigenschaft in Javascript festlegen?

Antworten: