Impostare la proprietà CSS in Javascript?

162

Ho creato il seguente ...

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

Come imposterei ora gli attributi CSS, ad esempio width: 100px?

javascript css

— Skizit
fonte

253

Utilizzare element.style:

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

— KJYe.Name 葉家仁
fonte

14

Che dire di quelli non ufficiali come -webkit-background-size? C'è un modo per impostarli con js semplici o dobbiamo usare jQuery?

— Luca

60

@Luke obj.style ["- webkit-background-size"] = "400px"

— Daniel X Moore

Questo in realtà modella l'elemento nell'elemento e non nel foglio di stile.

— Aft3rL1f3

56

Basta impostare il style:

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

Oppure, se lo desideri, puoi usare jQuery :

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

— djdd87
fonte

5

@Sime - Le mie citazioni non sono incoerenti. Uso sempre le virgolette doppie per JS poiché è lo standard al lavoro. Ad ogni modo, la prima riga aveva virgolette singole mentre l'ho copiata dalla domanda dei PO. Ora corretto comunque.

— DJD87

1

Bene, ora stanno bene, ma erano incoerenti al momento del mio commento:)

— Šime Vidas

2

@Sime - Ho riconosciuto che: "Ad ogni modo, la prima riga aveva virgolette singole mentre l'ho copiata dalla domanda dei PO. Ora corretto comunque."

— DJD87,

35

Per la maggior parte degli stili, procedere come segue:

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

Per gli stili che hanno trattini nel nome, invece, fai questo:

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

— Daniel X Moore
fonte

17

In realtà è abbastanza semplice con JavaScript vaniglia:

menu.style.width = "100px";

— Justin Niessner
fonte

14

Tutte le risposte ti dicono correttamente come fare quello che hai chiesto, ma consiglierei di usare JavaScript per impostare una classe sull'elemento e modellarlo usando CSS. In questo modo stai mantenendo la corretta separazione tra comportamento e stile.

Immagina se hai un progettista per ridisegnare il sito ... dovrebbero essere in grado di lavorare esclusivamente nei CSS senza dover lavorare con il tuo JavaScript.

Nel prototipo farei:

$(newElement).addClassName('blah')

— tacca
fonte

1

+1 da me - molto più facile / pulito per mantenere separati tutti i CSS.

— Ian Oxley

1

Versione jQuery di questo per riferimento ...$(selector).addClass('blah')

— zgr024

8

Solo per le persone che vogliono fare la stessa cosa nel 2018

Puoi assegnare una proprietà personalizzata CSS al tuo elemento (tramite CSS o JS) e modificarla:

Assegnazione tramite CSS:

element {
  --element-width: 300px;

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

Cessione tramite JS

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

Ottieni il valore della proprietà tramite JS

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

Ecco link utili:

— Mattia Astorino
fonte

6

Durante il debug, mi piace essere in grado di aggiungere un sacco di attributi CSS in una riga:

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

Abituandoti a questo stile puoi aggiungere un sacco di CSS in una riga in questo modo:

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

— una favola
fonte

5

se vuoi aggiungere una proprietà globale, puoi usare:

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

— Hetdev
fonte

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
fonte

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
fonte

1

Funziona bene con la maggior parte delle proprietà CSS se non sono presenti trattini.

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

Per le proprietà con trattini simili max-width, è necessario convertirli sausage-caseincamelCase

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

— Daut
fonte

0

È importante capire che il codice seguente non cambia il foglio di stile, ma cambia invece il DOM:

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

Il DOM memorizza un valore calcolato delle proprietà degli elementi del foglio di stile e quando si modifica dinamicamente uno stile di elementi tramite Javascript, si modifica il DOM. Questo è importante da notare e capire perché il modo in cui scrivi il tuo codice può influenzare le tue dinamiche. Se si tenta di ottenere valori che non sono stati scritti direttamente nell'elemento stesso, in questo modo ...

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

... restituirai un valore indefinito che verrà archiviato nella variabile 'propertyValue' dell'esempio di codice. Se stai lavorando per ottenere e impostare proprietà scritte all'interno di un foglio di stile CSS e desideri una SINGOLA FUNZIONE che ottenga, oltre a impostare valori di proprietà di stile in questa situazione, che è una situazione molto comune, allora devi usare JQuery.

$(selector).css(property,value)

L'unico aspetto negativo è che hai conosciuto JQuery, ma questo è onestamente uno dei tanti buoni motivi per cui ogni sviluppatore Javascript dovrebbe imparare JQuery. Se si desidera ottenere una proprietà CSS calcolata da un foglio di stile in puro JavaScript, è necessario utilizzare.

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

L'aspetto negativo di questo metodo è che solo il metodo getComputedValue ottiene, non imposta. Mozilla's Take on Computed Values Questo link approfondisce ulteriormente ciò che ho affrontato qui. Spero che questo aiuti qualcuno !!!

— Aft3rL1f3
fonte

Penso che al tuo primo blocco di codice manchi il contenuto?

— zb226

1

Lì è fisso

— Aft3rL1f3