css using js code example

Example 1: 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 2: html css js

<!DOCTYPE html>
<html lang="pt-br" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>...</title>
</head>
<body>
	...
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Example 3: css in js

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

Tags:

Css Example

Recent Posts