In this lesson, we will learn the different ways jQuery can interact with HTML elements, such as changing their CSS properties and attributes.
CSS and jQuery interaction
jQuery’s provides a css() function which allows you to change CSS property of any element on your page. You can change multiple properties at once as well, thanks to chaining concept in jQuery. For example, you can add a border to a <div> tag, change its background color, or set the width at the same time.
With .css() function, you can find the current value of an element’s CSS property or set value(s) of single or multiple CSS properties at once. For example, if you want to change the background color of a div tag called ‘container’, you can do so by writing the following piece of line.
$('#container').css('background-color', 'pink');
To retrieve the value, use:
var bg_color = $('#container').csss('background-color');
Changing multiple CSS properties
In jQuery, you can change more than one CSS property of an element at a time, with the help of chaining concept. For example, if you want to change the background-color and border-size of a <div> tag, you can change it like this:
$('#div_id').css('background-color', '#ff0000');
$('#div_id').css('border', '2px solid #ff0037');
To change multiple CSS properties at once, pass an object literal to .css() function instead of simple strings. This object literal has a list containing pairs of property names and values. After each property name, you insert a colon(:) followed by a value. Each name/value pair is separated by a comma, and the whole thing is surrounded by starting brackets { and closing brackets}.
The above lines of codes can be written as:
$(“#div_id”).css({ 'background-color' : '#FF0000', 'border' : '2px solid #FE0037' });
For the readability purposes, jQuery lets you write this as well:
$('#div_id').css({
'background-color' : '#FF0000',
'border' : '2px solid #FE0037'
});
Or you can write like this:
$('#div_id').css('background-color','#FF0000').css('border','2px solid #FE0037');
Pre-loader Example in jQuery
In this example, we will create a simple pre-loader with jQuery CSS functions. You can replace the image with an image of your own choice.
pre-loader with jQuery
The HTML
<div class="preloader_container"> <div class="preloader_img"> </div> </div>
The CSS
.preloader_container {
width: 100%;
height: 100%;
position: absolute;
background-color: #151a20;
z-index: 1;
}
.preloader_img{
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
The jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".preloader_container").css("background-image", "url('https://media.giphy.com/media/11FuEnXyGsXFba/giphy-downsized.gif')");
$(".preloader_container").css({"background-position": "center", "background-repeat":"no-repeat"});
$(".preloader_container").delay(10000).fadeOut(1000);
});
</script>
| jQuery Content Manipulation | Tutorial Home | jQuery Effects |
Comments