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

Question

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

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

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

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

563 10

javascript css

10 ответов:

Comments

Ничего не найдено.

kjy112 · Accepted Answer · 2017-08-24 13:34:09

использовать element.style:
var element = document.createElement('select');
element.style.width = "100px";

GenericTypeTea · Accepted Answer · 2011-03-04 16:57:51

просто установить style:
var menu = document.createElement("select");
menu.style.width = "100px";
или если вы хотите, вы можете использовать jQuery:
$(menu).css("width", "100px");

Daniel X Moore · Accepted Answer · 2017-02-27 03:03:25

для большинства стилей этого:
var obj = document.createElement('select');
obj.style.width= "100px";
для стилей, которые имеют дефисы в имени, сделайте это вместо этого:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

Justin Niessner · Accepted Answer · 2011-03-04 16:57:50

это на самом деле довольно просто с ванильным JavaScript:
menu.style.width = "100px";

Nick · Accepted Answer · 2011-03-04 17:05:09

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

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

в прототипе я бы сделал:
$(newElement).addClassName('blah')

Hetdev · Accepted Answer · 2015-08-26 20:36:57

Если вы хотите добавить глобальное свойство, вы можете использовать:
    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

afable · Accepted Answer · 2016-11-14 04:24:56

при отладке мне нравится добавлять кучу атрибутов css в одну строку:
menu.style.cssText = 'width: 100px';
привыкнув к этому стилю, вы можете добавить кучу css в одну строку следующим образом:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

Mohsin Khan · Accepted Answer · 2015-07-10 16:09:11

<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 · Accepted Answer · 2013-06-30 20:14:16

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

Mattia Astorino · Accepted Answer · 2018-08-15 17:42:53

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