Click here to Skip to main content
11,577,494 members (30,700 online)
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)

  Print Answers RSS
0 DamithSL 180
1 OriginalGriff 115
2 Richard MacCutchan 100
3 Abhinav S 90
4 Peter Leow 80
0 OriginalGriff 820
1 Sergey Alexandrovich Kryukov 681
2 Abhinav S 528
3 F-ES Sitecore 420
4 Suvendu Shekhar Giri 375


Advertise | Privacy | Mobile
Web04 | 2.8.150603.1 | Last Updated 21 Feb 2013
Copyright © CodeProject, 1999-2015
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