document.getElementById add style code example
Example 1: add style javascript
// Bad:
element.setAttribute("style", "background-color: red;");
// Good:
element.style.backgroundColor = "red";
Example 2: javascript modify css
//Pure JavaScript DOM
var el = document.getElementById("elementID");
el.style.css-property = "cssattribute";
//When doing A CSS property that have multiple words, its typed differently
//Instead of spaces or dashes, use camelCase
//Example:
el.style.backgroundColor = "blue";
//Make sure before using jQuery, link the jQuery library to your code
//JavaScript with jQuery
//jQuery can use CSS property to fid=nd an element
$("#elementID").css("css-property", "css-attribute");
//On jQuery, the CSS property is typed like normal CSS property
//Example:
$("#elementID").css("background-color", "blue");
//If you want multiple property for jQuery, you can stack them on one code
//instead of typing each attribute
//Example:
$("#elementID").css({"css-property": "css-attribute", "css-property": "css-attribute"});
//you can also make them nice by adding line breaks
//Example:
$("#elementID").css({
"css-property": "css-attribute",
"css-property": "css-attribute"});
//You can add as much CSS property and attribute as you want
//just make sure, always end it with a comma before adding another one
//the last property doesn't need a comma
Example 3: adding styling to element using javascript
var elem = document.querySelector('#some-element');
// Set color to purple
elem.style.color = 'purple';
// Set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';
// Set the height to 150px
elem.style.height = '150px';
Example 4: style through javascript
element.style.backgroundColor = "red"; // set the background color of an element to red
Example 5: how to change an element in a different elements code css
#container:hover > #cube { background-color: yellow; }
#container:hover + #cube { background-color: yellow; }
#container:hover #cube { background-color: yellow; }
#container:hover ~ #cube { background-color: yellow; }