1var elem = document.querySelector('#some-element');
2
3// Set color to purple
4elem.style.color = 'purple';
5
6// Set the background color to a light gray
7elem.style.backgroundColor = '#e5e5e5';
8
9// Set the height to 150px
10elem.style.height = '150px';
11
1// Getting the element first
2var myElement = document.querySelector("#myElement");
3
4// examples for updating styles
5myElement.style.color = "blue";
6myElement.style.backgroundColor = "red";
1const title = document.querySelector('h1')
2
3//title.setAttribute('style', 'margin: 50px');
4
5console.log(title.style); // Show all style propertyes
6console.log(title.style.color); // Log a color in console
7
8title.style.margin = '50px'; // Set a margin of title
9title.style.color='crimson'; // Set a color of title
10title.style.fontSize = '60px'; // Set font size of title
1// background-color
2<element>.style.backgroundColor = '#000';
3// background
4<element>.style.background = '#000';
5// color
6<element>.style.color = '#fff';
7// box-sizing
8<element>.style.boxSizing = 'border-box';
9// font-family
10<element>.style.fontFamily = '\'Times New Roman\', Times, serif';
11// font-size
12<element>.style.fontSize = '16px';
13// margin
14<element>.style.margin = 0;
15// padding
16<element>.style.padding = '20px';
17// width
18<element>.style.width = '100%';
19// height
20<element>.style.height = '100%';
21// margin-left
22<element>.style.marginLeft = 0;
23// font-weight
24<element>.style.fontWeight = 400;
1element.style.backgroundColor = "red"; // set the background color of an element to red