Ответы:
Используйте element.style:
var element = document.createElement('select');
element.style.width = "100px";Просто установите style:
var menu = document.createElement("select");
menu.style.width = "100px";Или, если хотите, вы можете использовать jQuery :
$(menu).css("width", "100px");:)
Для большинства стилей сделайте это:
var obj = document.createElement('select');
obj.style.width= "100px";Для стилей, в имени которых есть дефисы, сделайте это:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"Это на самом деле довольно просто с ванильным JavaScript:
menu.style.width = "100px";Все ответы правильно объясняют, как делать то, что вы просили, но я бы посоветовал использовать JavaScript, чтобы установить класс для элемента и стилизовать его с помощью CSS. Таким образом вы сохраняете правильное разделение между поведением и стилем.
Представьте, что если вы пригласили дизайнера изменить стиль сайта ... он должен иметь возможность работать исключительно в CSS без необходимости работать с вашим JavaScript.
В прототипе я бы сделал:
$(newElement).addClassName('blah')$(selector).addClass('blah')
Просто для людей, которые хотят сделать то же самое в 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');Здесь полезные ссылки:
При отладке мне нравится иметь возможность добавлять несколько атрибутов css в одну строку:
menu.style.cssText = 'width: 100px';Привыкнув к этому стилю, вы можете добавить связку CSS в одну строку следующим образом:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';<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'"/><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>Это хорошо работает с большинством свойств CSS, если в них нет дефисов.
var element = document.createElement('select');
element.style.width = "100px";Для свойств с дефисами в них, как max-width, вы должны преобразовать sausage-caseвcamelCase
var element = document.createElement('select');
element.style.maxWidth = "100px";Важно понимать, что приведенный ниже код не меняет таблицу стилей, а вместо этого меняет DOM:
document.getElementById("p2").style.color = "blue";
DOM хранит вычисленное значение свойств элемента таблицы стилей, и когда вы динамически изменяете стиль элементов с помощью Javascript, вы меняете DOM. Это важно отметить и понять, потому что способ написания кода может повлиять на вашу динамику. Если вы попытаетесь получить значения, которые не были записаны непосредственно в сам элемент, вот так ...
let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];... вы вернете неопределенное значение, которое будет сохранено в переменной propertyValue примера кода. Если вы работаете с получением и настройкой свойств, которые были написаны внутри таблицы стилей CSS, и вам нужна ОДНА ФУНКЦИЯ, которая получает, а также задает значения свойств-стилей в этой ситуации, что является очень распространенной ситуацией, тогда вы должны использовать JQuery.
$(selector).css(property,value)Единственным недостатком является то, что вы знакомы с JQuery, но это, честно говоря, одна из очень многих веских причин, по которой каждый Javascript Developer должен изучать JQuery. Если вы хотите получить свойство CSS, которое было вычислено из таблицы стилей в чистом JavaScript, тогда вам нужно использовать.
function getCssProp(){
let ele = document.getElementById("test");
let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}Недостатком этого метода является то, что метод getComputedValue только получает, но не устанавливает. Взгляд на вычисленные значения в Mozilla. Эта ссылка более подробно рассказывает о том, что я здесь рассмотрел. Надеюсь, это поможет кому-то!
-webkit-background-size? Есть ли способ установить их с простым js, или мы должны использовать jQuery?