Добавить CSS в кнопку JavaScript

Question

В моем проекте я часто использую JS Buttons, я не могу найти способ добавить к ним CSS. Вы можете помочь?

leftBtn = document.createElement('button');
leftBtn.innerText = "<";
rightBtn = document.createElement('button');
rightBtn.innerText = ">";
fireBtn = document.createElement('button');
fireBtn.innerText = "*";

Использование CSS-классов для изменения кнопок: <button class = "btn" >default button</button>

Используемый класс

Answer 1

var leftBtn = document.createElement('button');
leftBtn.innerText = "<";
leftBtn.className = "test_style"; // Set class name
leftBtn.style.color = "#000"; // You can also set style properties inline

...

Вот детская площадка:

https://jsfiddle.net/u5hojsgb/

Answer 2

В общем, есть два основных способа сделать это.

Первый, использующий встроенные стили, просто имейте в виду, что встроенный стиль имеет наивысший приоритет в документе.

elt.style.color = '...'

или

elt.setAttribute('style', '...')

Подробнее здесь

Вторым является использование имени класса. Вы можете просто определить имя класса и написать CSS для этого имени класса.

element.className.add = 'your-class-name'

тогда

.your-class-name { color: red }

Во-вторых, вы можете управлять именами классов, используя такие методы, как add, remove, toggle

Подробнее здесь

Answer 3

Просто сделай что-то подобное

leftBtn.style.marginLeft = '20px'
rightBtn.style.marginLeft = '20px'

Я думаю, это

Answer 4

вы можете использовать, например:

leftBtn.style.color = "blue";

Узнайте больше о https://developer.mozilla.org/es/docs/Web/API/HTMLElement/style

Answer 5

Возможно, вам нужно использовать className для вашего Javascript:

ПРИМЕР:

leftBtn.className = "name";

Надеюсь, это поможет:)

Answer 6

Вы можете использовать этот код для добавления класса CSS к каждой кнопке:

 leftBtn.className = "leftOne";
 rightBtn.className = "rightOne";
 fireBtn.className = "fireOne";

Тогда вы можете использовать обычный CSS для их стилизации.

Answer 7

Вы можете добавить класс к своим кнопкам, а затем добавить любой стиль в CSS:

leftBtn.className = "class_name"