Установить свойство CSS в Javascript?

Я создал следующее...

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

Как теперь установить атрибуты CSS, например width: 100px?

Ответ 1

Используйте element.style:

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

Ответ 2

Просто установите style:

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

Или, если хотите, вы можете использовать jQuery:

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

Ответ 3

Для большинства стилей это:

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

Для стилей, имеющих дефиши в имени, сделайте это вместо этого:

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

Ответ 4

Это на самом деле довольно просто с ванильным JavaScript:

menu.style.width = "100px";

Ответ 5

Все ответы говорят вам правильно, как делать то, что вы просили, но я бы посоветовал использовать JavaScript для установки класса в элементе и его стиля с помощью CSS. Таким образом, вы сохраняете правильное разделение между поведением и стилем.

Представьте себе, если у вас есть дизайнер, чтобы перестроить сайт... они должны иметь возможность работать исключительно в CSS без необходимости работать с вашим JavaScript.

В прототипе я бы сделал:

$(newElement).addClassName('blah')

Ответ 6

если вы хотите добавить глобальное свойство, вы можете использовать:

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

Ответ 7

<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'"/>

Ответ 8

При отладке мне нравится добавлять кучу атрибутов css в одну строку:

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

Привыкнув к этому стилю, вы можете добавить кучу css в одну строку:

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

Ответ 9

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

Ответ 10

В ответ вы можете сделать это:

    <h1 style={{width: '100px', float: 'left',
 marginRight: '10px', marginTop: '-17px'}}>Hello</h1> //note the double brackets

или переместите стиль в объект стиля, а затем выполните:

let styleObj = {width: '100px', float: 'left', marginRight: '10px', marginTop: '-17px'}  

<h1 style={styleObj}>Hello</h1> //no double brackets

camelCase, где есть дефис для атрибута css