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// Create our stylesheet
2var style = document.createElement('style');
3style.innerHTML =
4 '.some-element {' +
5 'color: purple;' +
6 'background-color: #e5e5e5;' +
7 'height: 150px;' +
8 '}';
9
10// Get the first script tag
11var ref = document.querySelector('script');
12
13// Insert our new styles before the first script tag
14ref.parentNode.insertBefore(style, ref);
15
1 const style = document.createElement(`style`);
2 // this.shadowRoot.appendChild(this.templateContent);
3 // log(`this.shadowRoot`, this.shadowRoot);
4 style.setContent = `
5 .run {
6 width: 100px;
7 height: 100px;
8 background: url(https://www.boston.com/wp-content/uploads/2016/05/yuge_anger.png) 0 0;
9 animation: run 500 step(6) infinite;
10 }
11 @keyframes run {
12 from {
13 background-position: 0 0;
14 }
15 to {
16 background-position: -600px 0;
17 }
18 }
19 `;
20
21