Встановити властивість CSS у Javascript?

162

Я створив наступне ...

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

Як я можу зараз встановити атрибути CSS, наприклад width: 100px?

javascript css

— Скізіт
джерело

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"] = "400px"

— Daniel X Moore

Це фактично стилює елемент в елемент, а не в таблицю стилів.

— Aft3rL1f3

56

Просто встановіть style:

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

Або якщо вам подобається, ви можете використовувати jQuery :

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

— djdd87
джерело

5

@Sime - Мої цитати не суперечать. Я завжди використовую подвійні лапки для JS, оскільки це стандарт у роботі. У будь-якому випадку, перший рядок мав одинарні лапки, коли я його скопіював із запитання про ОП. Виправлено зараз все одно.

— djdd87

1

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

— Šime Vidas

2

@Sime - Я зробив незрозумілий факт: "У будь-якому випадку, у першому рядку були одинарні лапки, коли я його скопіював із запитання про ОП. Виправлений зараз все одно".

— djdd87

35

Для більшості стилів це зробити:

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

Для стилів, які містять дефіси в імені, зробіть це замість цього:

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

— Даніель X Мур
джерело

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

— Гетдева
джерело

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 повинен вивчати JQuery. Якщо ви хочете отримати властивість CSS, яка була обчислена з таблиці стилів у чистому JavaScript, вам потрібно скористатися.

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

Мінусом цього методу є те, що метод getComputedValue тільки отримує, він не встановлюється. Mozilla взяти на обчислені цінності Це посилання іде більш глибоко про те, про що я тут звертався. Сподіваюся, це комусь допомагає !!!

— Aft3rL1f3
джерело

Я думаю, у вашому першому блоці коду відсутній вміст?

— zb226

1

Там його зафіксовано

— Aft3rL1f3