Ustawić właściwość CSS w Javascript?

161

Stworzyłem następujące ...

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

Jak mógłbym teraz ustawić atrybuty CSS, np. width: 100px?

javascript css

— Skizit
źródło

252

Zastosowanie element.style:

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

— KJYe.Name 葉家仁
źródło

14

A co z nieoficjalnymi, takimi jak -webkit-background-size? Czy istnieje sposób, aby ustawić je za pomocą zwykłego js, czy też musimy użyć jQuery?

— Luke,

60

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

— Daniel X Moore

To faktycznie stylizuje element w elemencie, a nie w arkuszu stylów.

— Aft3rL1f3

56

Wystarczy ustawić style:

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

Lub jeśli chcesz, możesz użyć jQuery :

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

— djdd87
źródło

5

@Sime - Moje cytaty nie są niespójne. Zawsze używam podwójnych cudzysłowów dla JS, ponieważ to standard w pracy. W każdym razie pierwsza linia zawierała pojedyncze cudzysłowy, ponieważ skopiowałem ją z pytania PO. Teraz i tak poprawione.

— djdd87

1

Cóż, teraz są w porządku, ale były niespójne w momencie mojego komentarza:)

— Šime Vidas

2

@Sime - potwierdziłem, że: „W każdym razie, pierwsza linia zawierała pojedyncze cudzysłowy, ponieważ skopiowałem ją z pytania PO. Teraz i tak poprawione”.

— djdd87

35

W przypadku większości stylów zrób to:

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

W przypadku stylów, które mają łączniki w nazwie, wykonaj następujące czynności:

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

— Daniel X Moore
źródło

17

To całkiem proste w przypadku waniliowego JavaScript:

menu.style.width = "100px";

— Justin Niessner
źródło

14

Wszystkie odpowiedzi mówią poprawnie, jak zrobić to, o co prosiłeś, ale radziłbym użyć JavaScript, aby ustawić klasę elementu i stylizować go za pomocą CSS. W ten sposób zachowujesz właściwy rozdział między zachowaniem a stylem.

Wyobraź sobie, że masz projektanta, który zmienił styl witryny ... powinien on być w stanie pracować wyłącznie w CSS bez konieczności pracy z JavaScriptem.

W prototypie zrobiłbym:

$(newElement).addClassName('blah')

— Nacięcie
źródło

1

+1 ode mnie - o wiele łatwiejsze / czystsze, aby oddzielić wszystkie CSS.

— Ian Oxley

1

Wersja jQuery tego w celach informacyjnych ...$(selector).addClass('blah')

— zgr024

8

Tylko dla osób, które chcą zrobić to samo w 2018 roku

Możesz przypisać niestandardową właściwość CSS do swojego elementu (przez CSS lub JS) i zmienić ją:

Przypisanie przez CSS:

element {
  --element-width: 300px;

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

Cesja przez JS

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

Uzyskaj wartość nieruchomości poprzez JS

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

Tutaj przydatne linki:

— Mattia Astorino
źródło

6

Podczas debugowania lubię móc dodać kilka atrybutów CSS w jednej linii:

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

Przyzwyczajając się do tego stylu, możesz dodać kilka css w jednej linii, jak poniżej:

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

— bajka
źródło

5

jeśli chcesz dodać usługę globalną, możesz użyć:

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

— Hetdev
źródło

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
źródło

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
źródło

1

Działa to dobrze z większością właściwości CSS, jeśli nie ma w nich myślników.

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

W przypadku właściwości z łącznikami, takich jak max-width, należy przekonwertować sausage-casenacamelCase

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

— Daut
źródło

0

Ważne jest, aby zrozumieć, że poniższy kod nie zmienia arkusza stylów, ale zamiast tego zmienia DOM:

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

DOM przechowuje obliczoną wartość właściwości elementu arkusza stylów, a kiedy dynamicznie zmieniasz styl elementów za pomocą JavaScript, zmieniasz DOM. Należy o tym pamiętać i zrozumieć, ponieważ sposób pisania kodu może wpływać na dynamikę. Jeśli spróbujesz uzyskać wartości, które nie zostały zapisane bezpośrednio w samym elemencie, na przykład ...

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

... zwróci niezdefiniowaną wartość, która zostanie zapisana w zmiennej „propertyValue” przykładu kodu. Jeśli pracujesz z pobieraniem i ustawianiem właściwości, które zostały zapisane w arkuszu stylów CSS i chcesz POJEDYNCZĄ FUNKCJĘ, która pobiera, a także ustawia styl-właściwości-wartości w tej sytuacji, co jest bardzo częstą sytuacją, wtedy musisz użyć JQuery.

$(selector).css(property,value)

Jedynym minusem jest to, że poznałeś JQuery, ale jest to jeden z wielu dobrych powodów, dla których każdy programista Javascript powinien uczyć się JQuery. Jeśli chcesz uzyskać właściwość CSS, która została obliczona z arkusza stylów w czystym JavaScript, musisz użyć.

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

Wadą tej metody jest to, że metoda getComputedValue tylko pobiera, a nie ustawia. Mozilla's Take on Computed Values To łącze prowadzi do głębszego omówienia tego, o czym tutaj pisałem. Mam nadzieję, że to komuś pomoże !!!

— Aft3rL1f3
źródło

Myślę, że w Twoim pierwszym bloku kodu brakuje treści?

— zb226

1

Tam jest naprawiony

— Aft3rL1f3