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

Question

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

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

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

Answer 1

Использование element.style:

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

Answer 2

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

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

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

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

Answer 3

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

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

Для стилей, в имени которых есть дефисы, сделайте это вместо:

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

Answer 4

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

menu.style.width = "100px";

Answer 5

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

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

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

$(newElement).addClassName('blah')

Answer 6

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

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

Answer 7

Только для людей, которые хотят сделать то же самое в 2018 году

Вы можете назначить пользовательское свойство CSS для вашего элемента (через CSS или JS) и изменить его:

Назначение через CSS:

element {
  --element-width: 300px;

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

Назначение через JS

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

Получение значения свойства через JS

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

Здесь полезные ссылки:

• https://developer.mozilla.org/en-US/docs/Web/CSS/--*
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
• https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty

Answer 8

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

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

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

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

Answer 9

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

Answer 10

Это хорошо работает с большинством свойств CSS, если в них нет дефисов.

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

Для свойств с дефисами, такими как max-width, следует преобразовать sausage-case в camelCase

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