Добавить CSS к кнопке JavaScript
В своем проекте я много использую кнопки JS, я не могу найти способ добавить к ним CSS. Вы можете помочь?
leftBtn = document.createElement('button');
leftBtn.innerText = "<";
rightBtn = document.createElement('button');
rightBtn.innerText = ">";
fireBtn = document.createElement('button');
fireBtn.innerText = "*";
Использование классов CSS для изменения кнопок:
<buttonclass = "btn">default button</button>
Это работает с классами?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Вы можете добавить класс к своим кнопкам, а затем добавить любой стиль в CSS:
leftBtn.className = "class_name"
Вы можете использовать этот код для добавления класса css к каждой кнопке:
leftBtn.className = "leftOne";
rightBtn.className = "rightOne";
fireBtn.className = "fireOne";
Затем вы можете использовать обычный CSS для их стилизации.
Мне нужно что-то вроде этого: <button class = "btn"> кнопка по умолчанию </button>, за исключением того, что я могу использовать на ней class = "btn", чтобы она имела стиль кнопки CSS.
то в моем примере просто измените leftOne, rightOne и fireOne на btn, и тогда каждому будет назначен класс btn css.
leftBtn.className = "btn-primary"; rightBtn.className = "btn-primary"; fireBtn.className = "btn-primary"; Не работает. (picturepan2.github.io/spectre/elements/buttons.html)
?? При этом каждой кнопке назначается класс css «btn-primary», и вы можете стилизовать кнопку с помощью <style> .btn-primary {/*some styles here*/}; </style>. Что с этим не работает?
Предполагается, что на нем будет использоваться btn-primary. btn-primary - это встроенный стиль CSS. Его просто нужно добавить к кнопке, чтобы у него был стиль.
Я вижу на странице, на которую вы ссылаетесь, что вам нужно использовать "btn btn-primary", поэтому используйте leftBtn.className = "btn btn-primary"; rightBtn.className = "btn btn-primary"; fireBtn.className = "btn btn-primary";.
Это сработает, теперь вы правильно устанавливаете классы «btn и btn-primary» на кнопках, но когда вы ссылаетесь на Spectre.min.css, а не просто на Spectre.min.css в теге ссылки, вам нужно ссылаться на него как на css /spectre.min.css, поэтому в настоящее время ваши стили Spectre не загружаются.
Он там, но находится в папке css, и вы пытаетесь ссылаться на него в корневой папке
Просто добавьте любые другие стили в свой main.css. Например. .btn .btn-primary {width:60px} Если вам нужна дополнительная помощь по использованию css, вы можете задать новый вопрос. (не забудьте принять мой ответ, если он отвечает на ваш исходный вопрос.)
Вероятно, вам нужно использовать className в вашем Javascript:
ПРИМЕР:
leftBtn.className = "name";
Надеюсь это поможет :)
вы можете использовать, например:
leftBtn.style.color = "blue";
Узнать больше в https://developer.mozilla.org/es/docs/Web/API/HTMLElement/style
Просто сделай что-нибудь вроде этого
leftBtn.style.marginLeft = '20px'
rightBtn.style.marginLeft = '20px'
Я думаю это
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
...
Вот детская площадка:
В общем, есть два основных способа сделать это.
Первый использует встроенные стили, просто имейте в виду, что встроенный стиль имеет наивысший приоритет в документе.
elt.style.color = '...'
или
elt.setAttribute('style', '...')
Во-вторых, с помощью имени класса. Вы можете просто определить имя класса и написать CSS для этого имени класса.
element.className.add = 'your-class-name'
тогда
.your-class-name { color: red }
Во-вторых, вы можете управлять именами классов, используя такие методы, как add, remove, toggle.
Просто добавьте желаемое свойство CSS, например
leftBtn.marginLeft = "20px".....