add css style js code example

Example 1: jquery css

$('#element').css('display', 'block'); /* Single style */
$('#element').css({'display': 'block', 'background-color' : '#2ECC40'}); /* Multiple style */

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: how to give css style in javascript

document.getElementById("myH1").style.color = "red";

Example 4: add css style sheet with javascript

<head>

<script>
function myFunction() {
  var x = document.createElement("LINK");
  x.setAttribute("rel", "stylesheet");
  x.setAttribute("type", "text/css");
  x.setAttribute("href", "styles.css");
  document.head.appendChild(x);
}
myFunction()
</script>

</head>

Example 5: how to change css using javascript

document.getElementById("myText").className = "anyNewClass"

Example 6: change style js

// select element from DOM
const el = document.querySelector('.para')
// change css style
el.style.color = 'purple'

Tags:

Css Example