jQuery is such an easy and wonderful library to use in web pages to add interactivity and animations. Its CSS APIs are one of the most important APIs of jQuery. Animation and design related tasks are created by these only in jQuery.
Do you face problems in using CSS functions or APIs of jQuery then this tutorial would be a right choice for you. Along with this tutorials, you also need to follow a jQuery master course to polish your skills and take them to the next level.
Common CSS Method of Jquery
The CSS methods set or return one or more style properties for the selected elements.
Create an HTML file and save it with the following text.
<html>
<head>
<title>jQuery CSS APIs Tutorial</title>
<style>
.intro{ border: 2px solid red }
.mydiv{ width:600px; height:400px; border:2px grooved green; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>CSS methods in jQuery are cool</p>
<p>jQuery offers a number of CSS APIs</p>
<p>This tutorial covers all the CSS APIs in jQuery</p>
<p>Read carefully this tutorial for a good hold</p>
<div class="mydiv"></div>
</body>
</html>
Now let’s begin with the first CSS API.
Note: all the following jQuery script you can put in the above html file before the closing body tag and publish or refresh this page to see the effect.
.addClass()
It will add one or more classes to existing html element.
Example:
<script>
$(document).ready(function(){
$("p:first").addClass("intro");
});
</script>
Explanation: It will add one class intro to the existing class to the first p element.
.css()
It will add css properties to element or it is the best option to insert style to element.
Example:
<script>
$(document).ready(function(){
$("p:first").css("color". “red”);
});
</script>
Output: The first p element will turn red.
.hasClass()
It returns true if specific element has a particular class as defined.
Example:
<script>
$(document).ready(function(){
$("p:first").hasClass("intro”).css(“color”,”red”);
});
</script>
Output: If the first p element has a class intro then it will change to red colour.
.height()
Display the height of element.
Example:
<script>
$(document).ready(function(){
alert($("div").height());
});
</script>
Explanation: Gives height of the given div.
.innerHeight()
It gives height of element including padding.
Example:
<script>
$(document).ready(function(){
alert($("div").innerHeight());
});
</script>
Explanation: Gives height of div including padding.
.innerWidth()
It gives width of element including padding.
Example:
<script>
$(document).ready(function(){
alert($("div").innerWidth());
});
</script>
Explanation: Gives width of div including padding.
.outerHeight()
It gives height of element including padding, border and margin.
Example:
<script>
$(document).ready(function(){
alert($("div").outerHeight());
});
</script>
Explanation: Gives height of div including padding, border and margin.
.outerWidth()
Example:
<script>
$(document).ready(function(){
alert($("div").outerWidth());
});
</script>
Explanation: Gives widtht of div including padding, border and margin.
.position()
It gives the current coordinates of element.
Example:
<script>
$(document).ready(function(){
var x = $("p").position();
alert("Top position: " + x.top + " Left position: " + x.left);
});
</script>
Explanation: Gives the position of p from top and left.
.removeClass()
It removes the class from existing class of elements.
Example:
<script>
$(document).ready(function(){
alert($("div").removeClass("sub"));
});
</script>
Explanation: It removes the class “sub” from div element.
.toggleClass()
It adds and removes class from elements.
Example:
<script>
$(document).ready(function(){
alert($("div").toggleClass("sub"));
});
</script>
Explanation: The above example adds and removes class sub from existing div.
.width()
It returns the actual width of the element.
Example:
<script>
$(document).ready(function(){
alert($("div").width());
});
</script>
Explanation: It returns the width of div.
About Author: This jQuery’s CSS APIs tutorials is composed by Rashmi a student of responsive website designing and UI Development course using HTML5, CSS3, JavaScript, jQuery, DHTML, XML, Ajax and reviewed by ADMEC Multimedia Institute’s IT Team.
