Add to a css class using JQuery

Question

Is it possible to add/update a css class using JQuery.

I know I can add css to a DOM element using this add css rule using jquery, but I would like to add/remove from the css class itself.

Did you look at the documentation first? http://api.jquery.com/css/ and http://api.jquery.com/class-selector/ — Jeremy, May 04 '11 at 01:14
The link you provided is to add css style(s), if you want to add a class to what you already have use `$("#tagid").addClass('classname');`. Otherwise you use something like `$("#tagid").css("color","red");` see [.css](http://api.jquery.com/css/) — Zach L, May 04 '11 at 01:27
can you tell me why do you want to add the class to the style itself?? that will appened to the body — kobe, May 04 '11 at 01:56

score 14 · Accepted Answer · edited Nov 04 '12 at 14:07

14

You cannot directly update the CSS classes in a separate css file with jQuery. You could however create a <style> tag and add/overwrite a CSS class:

$('<style>.newClass { color: red; }</style>').appendTo('body');

When updating a CSS class, you'll need to take care the cascading order. Otherwise, it may not turn out to be the effect you are after.

edited Nov 04 '12 at 14:07

Pierre

18,643
4
41
62

answered May 04 '11 at 01:22

William Niu

15,798
7
53
93

accepted for the first sentence, which is what I was asking. (apologies to others for not asking in a better way) – gotsp May 04 '11 at 01:50
@gotsp , one quick question , why do want to do this way and make it complicated , why don't you just add to the element you want. – kobe May 04 '11 at 01:55
@kobe, it was how I was thinking about trying to do something... thinking (incorrectly) that I needed to update a 'class' instead of updating the style of a DOM element. – gotsp May 04 '11 at 03:08
1

Your answer as posted yields invalid HTML. Style tags belong in the head section. See http://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html – Sparky Nov 04 '12 at 14:15

score 11 · Answer 2 · answered Apr 06 '15 at 14:30

11

It's too easy using the lastest versions of Jquery, using something like this:

$('jQuery selector').css({"css property name":"css property value"});

For example:

$('#MyDiv').css({"background-color":"red"});

answered Apr 06 '15 at 14:30

hcarrasko

2,320
6
33
45

The highest answer seems to be really updated. – Sackidude Aug 21 '21 at 13:40

score 9 · Answer 3 · edited Jan 20 '14 at 18:36

If I understand what you are trying to do I believe this should work for you.

$("#UniqueName").remove();

$("<style id="UniqueName" type='text/css'> .MyClass{ color:#f00 !important; font-weight:bold !important;} </style>").appendTo("head");

It'd be best to have logical small classes, and use jQuery's .toggleClass() method.

.Bold{ font-weight:bold; }
.Italic {font-style:italic;}

function SwitchFont(){
$(".MyObjects").toggleClass("Bold");
$(".MyObjects").toggleClass("Italic");
}

hardik · Answer 4 · 2019-11-09T04:30:19.090

I have best example of how to apply CSS class in multiple tags.
First create simple html page and inside write down your css.
Next you create simple Query and and apply custom css.
Now if you want apply which tag or attributes css using JQuery.

When I write down this code to easily understand

Code:

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#btn1").click(function(){
          $("h1,p").toggleClass("blue");
          $("div").toggleClass("important");
        });
      });
      </script>
<style>
 .important {
    font-weight: bold;
    font-size: 40px;
    color: chartreuse;
 }
.blue{
    color: #000080;
 }
</style>
</head>             
<body>
  <h1>This is example</h1>
  <p>This is example</p>
  <div>Some important message </div>
  <button id="btn1">Add class </button>
</body>
</html>

Please include some more text to support your answer – Ioannis Barakos Nov 05 '19 at 14:02 — Ioannis Barakos, Nov 05 '19 at 14:02

score 1 · Answer 5 · answered May 04 '11 at 01:17

1

You can do this by using the addClass and removeClass functions in jquery. Add the class like this:

$("#button1").click(function(){
   $(#the_div).addClass('myClass');
});

Then you can remove it like this:

$("#button2").click(function(){
   $("#the_div").removeClass('myClass');
});

Your CSS properties should be defined in ".myClass".

answered May 04 '11 at 01:17

Joe

117
1
2
9

1

did you read the OP's question? the OP wants to add **to a** class, not add **a** class – Naftali May 04 '11 at 01:21
@Neal , but there are better ways to do it , i think we should explain OP that he can still use addclass and .css to achieve the same. – kobe May 04 '11 at 01:37
1

@kobe, great, explain whatever relevant point you wish, but do it in comments, or do it _after_ you correctly answer the actual question as it was asked. – Sparky Nov 04 '12 at 14:22

score 0 · Answer 6 · edited Nov 04 '12 at 14:09

0

If you want to add new class or properties use add class

http://api.jquery.com/addClass/

which will add the properties to the DOM elements.

If you want to overwrite the existing properties use jquery .css , in your case Update

http://api.jquery.com/css/

.css will add as an inline style , so all your class properties will be overwritten

edited Nov 04 '12 at 14:09

Sparky

98,165
25
199
285

answered May 04 '11 at 01:36

kobe

15,671
15
64
91

Add to a css class using JQuery

6 Answers6

Linked

Related