Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS jQuery CSS3
Hi,
 
how can modify css class property by using jqury?
 
I have css class,
 
.slider-content
            {
                padding-left: 0px !important;
                left: 10%;
                right: 10%;
                top: 125px;
                height: 50px !important;
                width:100% !important;
            }
 
I want to modify this css class using jquery event
 
Thanks.
Posted 21-Feb-13 6:38am
ExpertITM1.2K
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You can't modify the class itself but you can change the css properties of all the elements that have that class.
 
$(".slider-content").each(function(){
    $(this).css("padding-left", "10px"); //do this for each property you want to change.
});
  Permalink  
Comments
ExpertITM at 21-Feb-13 13:41pm
   
hi,
 
this will effect only one property(padding-left)? Or remove all other property from class?
 
Thanks.
Shelby Robertson at 21-Feb-13 14:10pm
   
It will only modify that property. All other properties remain the same.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

You can't modify or change the class properties. Instead u can overwrite its property. See below examples..
This is your css class..
  .slider-content
    {
      padding-left: 0px !important;
      left: 10%;
      right: 10%;
      top: 125px;
      height: 50px !important;
      width:100% !important;
    }
JQuery code below..
 
$(".slider-content").css("padding-left", "10px"); 
means you are overwriting only 'padding-left' property of slider-content class. So only padding-left property will change, Remaining properties will not change.
 
To overwrite multiple properties at a time code below..
$('.slider-content').css({'width' : '900px','height' : '50px'});
hope it helps you lot..
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

$('#elem').css({
width : '100px',
height : '50px'
});
 
$('.slider-content').css({
width : '900px',
height : '50px'
});
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 21 Feb 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100