47

If I have one div element for example and class 'first' is defined with many css properties. Can I assign css class 'second' which also has many properties differently defined to this same div just on some event without writing each property in line.

Charles Sprayberry
  • 7,741
  • 3
  • 41
  • 50
eomeroff
  • 9,599
  • 30
  • 97
  • 138

6 Answers6

93

Yep, easily.

$("#mydiv").attr("class", "second");
womp
  • 115,835
  • 26
  • 236
  • 269
  • 3
    This will overwrite the class property, removing the 'first' class from the div. I believe the user wants the div to have both the 'first' and 'second' classes. – Annabelle Dec 02 '09 at 20:19
  • on some event for example click, I want div to have different look that is way I need other class, I woul rather avoid two classes on div "first seconf" (as Daff wrote above) because than I might deal with priority. Would I?? One more thing, $("#mydiv").attr("class", "second"); does this line of code is doing both addClass and removeClass ?? could it be written $(".first").attr("class", "second"); ?? – eomeroff Dec 02 '09 at 20:28
  • 1
    My understanding of the question was that he wanted to change the class, not add more classes. – womp Dec 02 '09 at 20:57
  • @SonOfOmer - yes, it is doing both. It essentially removes all classes, and replaces them with "second". – womp Dec 02 '09 at 20:58
  • yes changing classes was original question but I extend my question after i red some answers tnks – eomeroff Dec 02 '09 at 21:10
61
$(".first").addClass("second");

If you'd like to add it on an event, you can do so easily as well. An example with the click event:

$(".first").click(function() {
    $(this).addClass("second");
});
Mark Hurd
  • 13,010
  • 2
  • 27
  • 28
  • 1
    +1 for demonstrating an event handler. Perhaps you could show him a mouseover/mouseout combination to both add and remove the second class as well :) – Corey Ballou Dec 02 '09 at 20:12
  • Rather than adding/removing classes on mouseover/mouseout, try to use the :hover css selector. Eg: "first:hover". – WhyNotHugo Apr 07 '14 at 03:27
30

You can add and remove classes with jQuery like so:

$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")

By the way you can set multiple classes in your markup right away separated with a whitespace

<div class="second first"></div>
Daff
  • 43,734
  • 9
  • 106
  • 120
3

This may not be exactly on target because I am not completely clear on what you want to do. However, assuming you mean you want to assign a different class to a div in response to an event, the answer is yes, you can certainly do this with jQuery. I am only a jQuery beginner, but I have used the following in my code:

$(document).ready(function() {
    $("#someElementID").click(function() {  // this is your event
        $("#divID").addClass("second");     // here your adding the new class
    )}; 
)};

If you wanted to replace the first class with the second class, I believe you would use removeClass first and then addClass as I did above. toggleClass may also be worth a look. The jQuery documentation is well written for these type of changes, with examples.

Someone else my have a better option, but I hope that helps!

DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
Carvell Fenton
  • 2,341
  • 6
  • 23
  • 30
2

An HTML element like div can have more than one classes. Let say div is assigned two styles using addClass method. If style1 has 3 properties like font-size, weight and color, and style2 has 4 properties like font-size, weight, color and background-color, the resultant effective properties set (style), i think, will have 4 properties i.e. union of all style sets. Common properties, in our case, color,font-size, weight, will have one occuerance with latest values. If div is assigned style1 first and style2 second, the common prpoerties will be overwritten by style2 values.

Further, I have written a post at Using JQuery to Apply,Remove and Manage Styles, I hope it will help you

Regards Awais

Awais
  • 21
  • 1
0
$(document).ready(function () {

            $("#divId").toggleClass('cssclassname'); // toggle class
});

**OR**

$(document).ready(function() {
        $("#objectId").click(function() {  // click or other event to change the div class
                $("#divId").toggleClass("cssclassname");     // toggle class
        )}; 
)};
Virang Maniar
  • 1