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.
Add a comment
|
6 Answers
Yep, easily.
$("#mydiv").attr("class", "second");
5 Comments
Annabelle
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.
eomeroff
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"); ??
womp
My understanding of the question was that he wanted to change the class, not add more classes.
womp
@SonOfOmer - yes, it is doing both. It essentially removes all classes, and replaces them with "second".
eomeroff
yes changing classes was original question but I extend my question after i red some answers tnks
$(".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");
});
2 Comments
Corey Ballou
+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 :)
WhyNotHugo
Rather than adding/removing classes on mouseover/mouseout, try to use the :hover css selector. Eg: "first:hover".
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>
Comments
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!
Comments
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
Comments
$(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
)};
)};
