On my project I use JS Buttons a lot, I can't find a way to add CSS to them. Can you help?
leftBtn = document.createElement('button');
leftBtn.innerText = "<";
rightBtn = document.createElement('button');
rightBtn.innerText = ">";
fireBtn = document.createElement('button');
fireBtn.innerText = "*";
Using CSS classes to change buttons:
<button class="btn">default button</button>
You could use this code to add a css class to each button:
leftBtn.className = "leftOne";
rightBtn.className = "rightOne";
fireBtn.className = "fireOne";
Then you can use regular css to style them.
leftBtn.className = "btn-primary"; rightBtn.className = "btn-primary"; fireBtn.className = "btn-primary"; Doesn't work. (picturepan2.github.io/spectre/elements/buttons.html)<style> .btn-primary {/*some styles here*/}; </style> What doesn't work about it?leftBtn.className = "btn btn-primary"; rightBtn.className = "btn btn-primary"; fireBtn.className = "btn btn-primary";You could add a class to your buttons, and then add any styling in CSS:
leftBtn.className = "class_name"
You probably need to use the className to your Javascript:
EXAMPLE:
leftBtn.className = "name";
Hope this helps :)
you can use for example :
leftBtn.style.color = "blue";
Lear more about in https://developer.mozilla.org/es/docs/Web/API/HTMLElement/style
In general, there are two main ways to do that.
The first one using inline styles, just keep in mind that inline style has the highest precedence in a document.
elt.style.color = '...'
or
elt.setAttribute('style', '...')
The second is by using the class name. You can simply define a class name and write CSS for this class name.
element.className.add = 'your-class-name'
then
.your-class-name { color: red }
In a second way, you can manage class names by using methods like add, remove, toggle
Just do something like this
leftBtn.style.marginLeft = '20px'
rightBtn.style.marginLeft = '20px'
I guess it
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
...
Here is a playground:
leftBtn.marginLeft = "20px".....