How to write CSS in JS

How to write CSS in JS

Let’s create the first dynamic part on the client side. By changing the CSS from Javascript would enable us to adjust the page design live.

What is jQuery?

jQuery purpose is to write Javascript easier for your website. It’s a lightweight library that comes with these features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

In most of the cases, you can do all of the above without this library, but with a lot of boilerplate code.

Prepare our HTML DOM

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <!-- Our css file -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- We load jQuery library using a CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Our custom script -->
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Hello kidocoder!</h1>
    <p>Learn jQuery with us.</p>
    <div class="example">
    	<!-- span - inline text tag -->
    	<span>This is an inline text. But will still be displayed on a new line because of the div parent.</span>
    </div>
</body>
</html>

We have our simple HTML page. Now let’s add some CSS.

/* style.css */

h1 {
	color: #BADA55; /* haha */
}

p {
	color: #FF2D00;
}

.example {
	display: block;
	position: relative;
	width: 40%;
	background-color: #CCC;
}

.cool-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
}

Begin writing jQuery

To read or apply a change in CSS you need to use selectors. A selector uses the same principle from CSS. So, by using .example or #example jquery will browse the DOM for that element and will create a JS object for you to use.

To check how it works, let’s open the console by pressing CMD + ALT + I on Mac or CTRL + SHIFT + I on Windows. For Firefox / Safari, you might need to install an inspector.

After opening the console let’s paste some of these commands there to see how jQuery handles them. Remember, all Javascript code runs on the client side ( in the browser ).

/* run this in console */

$("p")
$("h1")
$(".example")
$("html")
$("body")

To start by showing you a simple example. Let’s create an animation after the page is loaded.

/* script.js */

$(document).ready(function(){

	$("p").fadeOut();

});

As you can see when the page is loaded it creates an event for which we have a listener. In this case, the closure function will be called when the event is triggered and our animation starts. Here are some examples of animations for you to practice:

/* script.js */

$(document).ready(function(){

	$("p").fadeOut("slow", function() {
		$("p").show(); // show back after fadeout
	});

	$(".example").slideUp();

	$("h1").hide();

});

Manipulate CSS with jQuery

Now that we have an idea about selectors let’s actually change the CSS. To read or write a CSS property from a DOM object you can use .css() function.

/* script.js */

$(document).ready(function(){

	var color = $("example").css("background-color");
	console.log(color); // check console for log

	// we add a trigger for click events on div
	$("div").click(function() {
		$("span").addClass("cool-text");
		$(".example").css("background-color", "#FFF");
	});

	// $("p").fadeOut("slow", function() {
	// 	  $("p").show(); // show back after fadeout
	// });

	// $(".example").slideUp();

	// $("h1").hide();

});

Now refresh the page and click the ‘inline’ text. By adding triggers in the page, you can track user events and manipulate the page in such way that will improve the user experience. Continue to practice selectors, triggers, animations and css changes. Next time we’ll continue by showing you how to add html tags for events.

You can download this project from our GitHub repository.

See you on the next tutorial !

Share on

See Also
Send us a few words.
What would you like to see different on this blog?
👌
👎