jQuery is a fast, small and feature-rich JavaScript library included in a single .js file. jQuery makes a web developer's life easy. It provides many built-in functions using which we can accomplish various tasks easily and quickly. jQuery's change methods allow we to alter the Document Object Model of our page using a syntax that's much friendlier than the one provided by native DOM of changing methods. We can change DOM elements using various built-in jQuery functions. For example, adding or removing elements, modifying html content, css class etc.
So, let's get started to practice it.
jQuery provides a css() method that can be used to extract and modify CSS properties for an HTML element. Just like other jQuery methods, the css() method can be written with 1 or 2 arguments. If written with 1 argument, it means we want to take the value of CSS property of that element.
For example, if we want to know what the background color of an HTML element is with id="box", we can write it by :
var value = $("#box").css("background-color");
Now, the value variable will contain RGB color codes like rgb(255, 192, 203). Let's immediately practice with the following program code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$("#take").click(function() {
var value1 = $("#box").css("width");
var value2 = $("#box").css("height");
var value3 = $("#box").css("background-color");
$("#goto").html(value1+"
"+value2+"
"+value3);
})
});
</script>
<style>
#box {
width: 300px;
height: 80px;
background-color: pink;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box"></div>
<br>
<button id="take">Take the CSS Property</button>
<p id="goto"></p>
</body>
</html>
This is the temporary output of the program code we create :
In the above page we have a box created from the <div id="box"> </ div> tag. This box is colored with CSS via the #box selector. We set the width, height, and background-color, as well as border effects (border) from CSS. This is what we will take with jQuery.
#box {
width: 300px;
height: 80px;
background-color: pink;
border: 2px solid black;
}
When the Take the CSS Property button is clicked, the following program code will be executed :
var value1 = $("#box").css("width");
var value2 = $("#box").css("height");
var value3 = $("#box").css("background-color");
$("#goto").html(value1+"
"+value2+"
"+value3);
and here the final results :
Here, we use the css() method to retrieve the CSS property value from $("#box"). Property to be taken is width, height and background-color. The result is then stored into the variable value1, value2 and value3. In the last line all of these values we display by using the html() method into the <p id="goto"> tag.
Noteworthy, the argument value of the css() method is the CSS property. If we write incorrectly or the property is not set from CSS, the result will be empty.
The css() jQuery method can also be used to change the value of a CSS property. Suppose that by clicking a button, we can change the background color or size of an HTML element.
If Iwe want to change the height of an HTML element with id="box" to 120 pixels, we can use the following code :
$("#box").css("height","120px");
Let's immediately practice with the following program code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$("#change").click(function() {
$("#box").css("width","500px");
$("#box").css("height","120px");
$("#box").css("background-color","yellow");
})
});
</script>
<style>
#box {
width: 300px;
height: 80px;
background-color: pink;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="box"></div>
<br>
<button id="change">Change!</button>
</body>
</html>
This is the temporary output of the program code we create :
Here, we have the same box as before. However, when the Change! button on click, which will be executed is the following program code :
$("#box").css("width","500px");
$("#box").css("height","120px");
$("#box").css("background-color","yellow");
When this jQuery program code line is executed it means we will replace the CSS property for the element id="box" to have the value :
width: 500px;
height: 120px;
background-color: yellow;
and here are the final results :
Since these values are different from the initial CSS code box, it will appear to be a drastic change. Box will be enlarged and yellow.