1document.documentElement.style.setProperty("--main-background-color", "green");
1//Pure JavaScript DOM
2var el = document.getElementById("elementID");
3el.style.css-property = "cssattribute";
4
5//When doing A CSS property that have multiple words, its typed differently
6//Instead of spaces or dashes, use camelCase
7//Example:
8el.style.backgroundColor = "blue";
9
10//Make sure before using jQuery, link the jQuery library to your code
11//JavaScript with jQuery
12//jQuery can use CSS property to fid=nd an element
13$("#elementID").css("css-property", "css-attribute");
14
15//On jQuery, the CSS property is typed like normal CSS property
16//Example:
17$("#elementID").css("background-color", "blue");
18
19//If you want multiple property for jQuery, you can stack them on one code
20//instead of typing each attribute
21//Example:
22$("#elementID").css({"css-property": "css-attribute", "css-property": "css-attribute"});
23
24//you can also make them nice by adding line breaks
25//Example:
26$("#elementID").css({
27 "css-property": "css-attribute",
28 "css-property": "css-attribute"});
29//You can add as much CSS property and attribute as you want
30//just make sure, always end it with a comma before adding another one
31//the last property doesn't need a comma
32
1<html>
2<body>
3
4<p id="p2">Hello World!</p>
5
6<script>
7document.getElementById("p2").style.color = "blue";
8</script>
9
10<p>The paragraph above was changed by a script.</p>
11
12</body>
13</html>
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>Change the Background Color with JavaScript</title>
6<script>
7 // Function to change webpage background color
8 function changeBodyBg(color){
9 document.body.style.background = color;
10 }
11
12 // Function to change heading background color
13 function changeHeadingBg(color){
14 document.getElementById("heading").style.background = color;
15 }
16</script>
17</head>
18<body>
19 <h1 id="heading">This is a heading</h1>
20 <p>This is a paragraph of text.</p>
21 <hr>
22 <div>
23 <label>Change Webpage Background To:</label>
24 <button type="button" onclick="changeBodyBg('yellow');">Yellow</button>
25 <button type="button" onclick="changeBodyBg('lime');">Lime</button>
26 <button type="button" onclick="changeBodyBg('orange');">Orange</button>
27 </div>
28 <br>
29 <div>
30 <label>Change Heading Background To:</label>
31 <button type="button" onclick="changeHeadingBg('red');">Red</button>
32 <button type="button" onclick="changeHeadingBg('green');">Green</button>
33 <button type="button" onclick="changeHeadingBg('blue');">Blue</button>
34 </div>
35</body>
36</html>