Add CSS in JS

css-and-js.md

.btn {
	background-color: red;
	color: white;
	padding: 20px;
}

// Get the element
var button = document.querySelector('button');

// Add the class
button.classList.add('btn');

css-in-js.js

// Get the element
var button = document.querySelector('button');

// Setup the styles object
var styles = {
    backgroundColor: 'red',
    color: 'white',
    padding: '20px'
};

// Add the styles to the element
Object.assign(button.style, styles);

style-in-js.js

// Create styles
var styles = [
    '.btn {',
      'background-color: red;',
      'color: white;',
      'padding: 20px;',
    "}"
].join('');

// Get the head element
var head = document.head || document.getElementsByTagName('head')[0];

// Inject styles into the DOM
var style = document.createElement('style');
style.textContent = styles;
head.appendChild(style);

// Get the element
var button = document.querySelector('button');

// Add the class
button.classList.add('btn');