change attributes of css class when javascript function runs

Question

so I have this function below...

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.six").load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script>

I basically want to change the css attributes of tile-group.six to have a different margin. Any ideas how I might go about this ?

possible duplicate of Change an element's CSS class with JavaScript — cchapman
– cchapman, Commented Apr 23, 2015 at 14:15

Enjoyted · Accepted Answer · 2015-04-23 13:55:01Z

4

you should take a look at the .css() function of jQuery like

$(".tile-group.six").css('margin-left', '50px');

and so on

answered Apr 23, 2015 at 13:55

Enjoyted

1,1516 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3504751 Over a year ago

worked well thanks , the above answer used a slightly different syntax any ideas which one is better any why ?

Phylogenesis Over a year ago

Callum's answer allows you to set more than one CSS value at once: $(selector).css({ cssKeyA: 'cssValueA', cssKeyB: 'cccValueB', ... });, rather than $(selector).css('cssKeyA', 'cssValueA').css('cssKeyB', 'cssValueB');.

user3504751 Over a year ago

ah right , I think I will use that one in this instance thanks for your help buddy !

user3504751 Over a year ago

this didnt seem to work - $(".tile-group.main").css({ margin-left:"50px", width: "1080px"}).load("musability-musictherapy-company-overview.html");

Callum. · Accepted Answer · 2015-04-23 14:08:15Z

3

$(".tile-group.six").css({margin:"0"});

This should be what you're after.

As Phylogenesis pointed out in his comment on the below answer, this method can be used to change multiple CSS values at once using a comma delimiter e.g.

$(".tile-group.six").css({margin:"0", padding:"0"});

edited Apr 23, 2015 at 14:08

answered Apr 23, 2015 at 13:55

Callum.

1461 silver badge12 bronze badges

5 Comments

user3504751 Over a year ago

this didnt seem to work - $(".tile-group.main").css({ margin-left:"50px", width: "1080px"}).load("musability-musictherapy-company-overview.html");

user3504751 Over a year ago

the function doesn't run at all

Callum. Over a year ago

Okay, change margin-left to marginLeft and that should work

user3504751 Over a year ago

ok stupid me missing the uppercase on the L for left.... it works awesome, your a genius thanks ... why the different name references then ? i am guessing javascript reads a - as something else

Callum. Over a year ago

I think it is to do with the hyphen yes, another one off the top of my head is backgroundColor, which would be background-color or simply background in a style sheet :)

Collectives™ on Stack Overflow

change attributes of css class when javascript function runs

2 Answers 2

4 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Linked

Related