Home »
JQuery
JQuery CSS
JQuery CSS: Here, we are going to learn about the JQuery CSS with syntaxes and examples.
Submitted by Siddhant Verma, on November 18, 2019
In the previous articles, we have talked about JQuery selectors and how to add content to the HTML DOM using JQuery. In this article, we'll learn how to use CSS with JQuery to style elements on the DOM dynamically? We'll practice this on the mini pokedex we were building last time so make sure you have this code with you,
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Pokedex</title>
<style>
body {
background: whitesmoke;
}
.card-image img {
height: 200px;
width: 200px;
}
</style>
</head>
<script>
var id = 0;
</script>
<body>
<div class="container">
<h1 class="center">My Pokedex</h1>
<div class="row cards">
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png">
</div>
<div class="card-content" id="1">
<p class="center name">Squirtle</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://giantbomb1.cbsistatic.com/uploads/scale_small/13/135472/1891761-004charmander.png">
</div>
<div class="card-content" id="2">
<p class="center name">Charmander</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://d2skuhm0vrry40.cloudfront.net/2019/articles/2019-10-31-15-44/pokemon_sword_shield_starters_grookey.jpg/EG11/resize/300x-1/quality/75/format/jpg">
</div>
<div class="card-content" id="3">
<p class="center name">Grookey</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-eevee.png">
</div>
<div class="card-content" id="4">
<p class="center name" id="4">Eevee</p>
</div>
</div>
</div>
</div>
<div class="row cards">
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIuCM0zB4HkGx85Z8D6EdRVrlGxAUWT1dbwZcZFNzonHle__6Uhg&s">
</div>
<div class="card-content" id="5">
<p class="center name">Wigglytuff</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcvGrOH5M64dkU9a-XC-P5rDkPLABag47e88zGybJtFbWPjsUh&s">
</div>
<div class="card-content" id="6">
<p class="center name">Galarian Ponyta</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-pikachu.png">
</div>
<div class="card-content" id="7">
<p class="center name">Pikachu</p>
</div>
</div>
</div>
<div class="col l3">
<div class="card">
<div class="card-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiOrI-gcZubLIku3Ogxl6SLC2_ZmDgNjrPpk095qBxuxKX8lxmvA&s">
</div>
<div class="card-content" id="8">
<p class="center name">Mew</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Output
I have named all the pokemons (hopefully they're right). Make sure you have cleared the index.js from the previous article. The first thing I want to show is how to hide and unhide elements. If we were doing it with JavaScript we'd simply grab a hold of that element and onto its style property set the display to none. Let's first get a reference to these cards using JQuery,
const cards=$('.card');
cards[0].style.display="none";
Output: The first card is removed from the DOM.
This is how we'd normally do using vanilla JS. Let's do this using the JQuery hide() method which hides a certain element from the DOM. Before that, notice that I have all the cards under a class name ‘cards' that I gave myself. We can use this class to get a reference to all the cards on the DOM. This would be a great workaround for the exercise for the previous article. Let's target this first,
const cards=$('.cards');
console.log(cards);
Output:
k.fn.init(2) [div.row.cards, div.row.cards, prevObject: k.fn.init(1)]
0: div.row.cards
1: div.row.cards
length: 2
prevObject: k.fn.init [document]
__proto__: Object(0)
You can see the 0th element gives us the first row of pokemons and 1st element gives us the second row. We can all the elements in a single index by putting both the rows inside a div with the class 'cards'. For the time being let's stick to what we have already done.
Let's say your poor squirtle lost a hefty battle. You can't have it on your team anymore as it needs rest and time to heal. We can remove the squirtle from the pokedex by using a JQuery filter. Filters are nothing but pseudo-classes in CSS like :first, :nth-child, :first-child etc. They are preceded by a colon. Inside the cards, variable the first card is that of the squirtle so we can easily remove it by using the JQuery selector and adding the JQuery CSS hide method to it. Let's do this,
$('.cards :first').hide();
Output
Voila! The squirtle is no longer part of the pokedex. Let's put it back using the show() method,
$('.cards :first').show();
Output
Great. We can now hide and show elements using the hide() and show() methods in JQuery. Let's style our elements using JQuery CSS now.
I want the title to be a bit smaller. So let's give it a font size of 20px.
$('h1').css('font-size','20px');
Output
My Pokedex
The next thing I want is to give all these cards some background color. Typically the background color represents the type for a particular Pokemon for ex green for a grass type, blue for water type etc. So let's do this,
$('.cards :first').css('background','#90caf9');
Output
Our squirtle now has a background of blue because it's water type! Cool. Notice how the card inside remains uncolored. Can you figure out why?
This is because of the exact element we're setting the background color of. We're actually setting the background color of the element wrapping the card because of our selector. Let's use some filters to target the exact card now and give an electric yellow background color to our pikachu.
$('body > div > div:nth-child(3) > div:nth-child(3) > div').css('background-color','#ffea00');
Output
You can now see the entire card having a background color. The element we're targeting actually decides how the CSS properties are set. As an exercise, try to find out the types of all the remaining Pokemon and give them a background color for the same.