CSS-related functions in Jquery
In this article I am going to explain about how to use and what is the use of CSS-related functions functions in Jquery. We have so many css related functions in Jquery.Using those function we can handle the style property of the HTML element(s).
In Jquery we have so many css related functions But i am going to explain some main functions those are.
1.css()
2.position()
3.hieght()
4.width()
Using these above function we can handle the style property of an HTML element(s).
1.css()
Using this function get an style property or set the style property what you want.
Get property Code:
<div style="color:blue;">blue</div>
<div style="color:red;">red</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
<script>
$("div").click(function () {
var color = $(this).css("color");
alert("color of the div tag is "+color);
});
</script>
using above code we can get any property of style like color,background-color,width,height,border...
Set property code:
Here i writing the code for applying border to a div on its click event.
<div style="color:blue;">blue</div>
<div style="color:red;">red</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
<script>
$("div").click(function () {
$('div').css("border","1px solid silver");
});
</script>
we can apply multiple properties in a single line that is here i need to apply border and background-color.
<div style="color:blue;">blue</div>
<div style="color:red;">red</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>
<script>
$("div").click(function () {
$('div').css({
"border":"1px solid gray",
"background-color":"silver"
});
});
</script>
2.position()
using this position function we can get the position of an html element.That means we can get left and top properties of an elements.
<div id="pos">Hellow friends</div>
<script>
var position=$('#pos').position();
alert("left value is"+position.left);
alert("top value is"+position.top);
</script>
this is very good function to change position of elements.
3.height()
using this function we can get and set the height property of an html element.
Get height:
<div id="pos" >Hellow friends</div>
<script>
var height=$('#pos').height();
alert("height is "+height);
</script>
Set height:
<div id="pos" >Hellow friends</div>
<script>
$('#pos').height(40);
</script>
3.width()
using this function we can get and set the width property of an html element.
Get width:
<div id="pos" >Hellow friends</div>
<script>
var width=$('#pos').width();
alert("width is "+width);
</script>
Set width:
<div id="pos" >Hellow friends</div>
<script>
$('#pos').width(400);
</script>