Sunday, June 7, 2015

css using jquery

Hi!
  as we know its really very easy to set height & width of any div using css
here is an example

Html:
 <div class="block">
</div>

CSS:
.block
{
     height:100px;
     width:100px;
     background-color:black;
}

so the output will be like this







But the problem occurs when we want to set it using jquery .
So dont worry its really very simple you can set property of any class i jquery by the method below :
$(document).ready(function(){
     $('.block').css('height','100px');
      $('.block').css('width','100px');
});

even if you want you can make the height variable :
$(document).ready(function(){
    var height_variable= 100;
     $('.block').css('height',   height_variable +'px');
      $('.block').css('width','100px');
});

Now what if we want to set the height of each block equal to any particular div than :

$(document).ready(function(){
    var height_variable= $('.class_of_Desire_Div');
     $('.block').css('height',   height_variable +'px');
      $('.block').css('width','100px');
});

Even you can  write any style for any class .


No comments:

Post a Comment