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>

Class used

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>

Class used

• javascript
• css
• button

• Simply add the CSS property you want like leftBtn.marginLeft = "20px"..... – Mamun Commented Nov 12, 2018 at 14:07
• Does this work with classes? – Auron Hines Commented Nov 12, 2018 at 14:08

7 Answers 7

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.

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/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', '...')

More info here

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

More info here

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:

https://jsfiddle/u5hojsgb/