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

162

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

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

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

javascript css Skizit
источник

253

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

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

KJYe.Name 葉家仁
источник

14

А как насчет неофициальных, как -webkit-background-size? Есть ли способ установить их с простым js, или мы должны использовать jQuery?

Люк

60

@Luke obj.style ["- webkit-background-size"] = "400 пикселей"

Даниэль Х Мур,

Фактически это стилизует элемент в элементе, а не в таблице стилей.

Aft3rL1f3

56

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

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

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

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

djdd87
источник

5

@Sime - Мои цитаты не являются противоречивыми. Я всегда использую двойные кавычки для JS, так как это стандарт на работе. Во всяком случае, в первой строке были одинарные кавычки, поскольку я скопировал их из вопроса ОП. Исправлено сейчас все равно.

djdd87

1

Ну, теперь они в порядке, но они были непоследовательны на момент моего комментария:)

Шиме Видас

2

@Sime - я подтвердил, что: «Во всяком случае, в первой строке были одинарные кавычки, так как я скопировал ее из вопроса о OP. Теперь все равно исправили».

djdd87

35

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

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

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

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

Даниэль Х Мур
источник

17

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

menu.style.width = "100px";

Джастин Нисснер
источник

14

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

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

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

$(newElement).addClassName('blah')

Ник
источник

1

+1 от меня - намного проще / чище держать все ваши CSS отдельно.

Ян Оксли

1

jQuery версия этого для справки ...$(selector).addClass('blah')

zgr024

8

Просто для людей, которые хотят сделать то же самое в 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');

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

Маттиа Асторино
источник

6

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

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

Привыкнув к этому стилю, вы можете добавить связку CSS в одну строку следующим образом:

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

Басня
источник

5

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

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

Hetdev
источник

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

Мохсин Хан
источник

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>

Мохсин Хан
источник

1

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

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

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

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

Даут
источник

0

Важно понимать, что приведенный ниже код не меняет таблицу стилей, а вместо этого меняет 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. Эта ссылка более подробно рассказывает о том, что я здесь рассмотрел. Надеюсь, это поможет кому-то!

Aft3rL1f3
источник

Я думаю, что ваш первый блок кода не хватает содержимого?

zb226

1

Там это исправлено

Aft3rL1f3

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

Ответы: