1

Is it possible to change a css class content with JQuery?

For instance, I have the following page:

html

<div class="foo"> FOO </div>

css

.foo {
    color: black;
}

Now I want to change the color in foo class and maybe add another css attributes in the class. Can I do that with JQuery?

So that I would get

css

.foo {
    color: red;
    display: inline;
}

I understand that it is possible to modify the style of a specific element in any way I want, but I am interested in changing class content here.

Thank you.

Improve this question
2
  • If I understand, you want to write inside a CSS file to update a class ? To my knowledge, you can't do that with jQuery alone. You may need to use a server programming language like Java, PHP... to do that Commented Mar 17, 2019 at 12:23
  • @Knriano, you understood me almost correctly. One thing is I do not care whether or not the css file will change, I just want the css class for the page being updated, i.e. if the update will happen just in memory it will be fine as well. Thank you. Commented Mar 17, 2019 at 15:08

5 Answers 5

Reset to default
1

You can use this

$(".foo").css({"color": "red", "display": "inline"});

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

1 Comment

Let me quote my question, please, I understand that it is possible to modify the style of a specific element in any way I want, but I am interested in changing class content here. Thank you.
0

You can use two different css file and switch the URL in link tag on an event.

<link rel="shortcut icon" href="FIRST_CSS_FILE_URL">


$('button').click(function() {
    $('link').attr('href', SECOND_CSS_FILE_URL)   
})
Improve this answer

1 Comment

The neatest solution so far. Thank you.
0

Yes you can change whole class using http://api.jquery.com/attr/ as shown below. But you need to assign ID to your element.

<div id="dv_id" class="foo"> FOO </div>
$("#dv_id").attr('class', 'newClass');

You can even addclass or toggleclass like this:

$("#dv_id").addClass('newClass');
$("#dv_id").toggleClass('change_me newClass');

or May be you are looking for Change CSS class properties with jQuery

Hope this will help you solve your question

Improve this answer

2 Comments

It does not change the class itself. So, the answer is not useful at all. Thank you.
Let me quote my question, please, I understand that it is possible to modify the style of a specific element in any way I want, but I am interested in changing class content here. Thank you.
0

You can't change the content of external css file. However, you can overwrite it. If the css class is not defined in external css file, you may be able to change it.

I think your purpose is to change the style of all elements that has same class foo and you want to do it once in one place. In that case, overwriting the style will serve your purpose.

Just make style tag defining the style and insert it to the end of <head></head> tag

Try this:

$('<style>.foo { color: red, display: inline; }</style>').appendTo('head');
Improve this answer

1 Comment

Yes, that is a nice solution. Thank you.
0

Here is a partial answer to your problem...I think this is what you want:

**JS**
$(document).ready(function() {
    let css = "";
    $.ajax({
        method: 'get',
        url: 'test.css',
        success: function(response) {
            css = response;
            let pos = css.indexOf(".foo {");
            innerText = "   backgound: #ccc";
            css = css.substring(0, pos + ".foo {".length) + "\n" +  innerText + "\n}";
            console.log(css);
        }
    });
});

**CSS Input**
.foo {
    color:black;
}

**CSS Output**
.foo {
   backgound: #ccc
}

Assumptions: Your css file is in the same folder, along with the html. The only problem with Javascript is it won't allow you to write to a external file. A check for jQuery plugins turned up with one old plugin called twFile. I could not find its code minified / other. See if you can take this further...just writing to a file (nodejs perhaps).

Improve this answer

1 Comment

That is a nice answer. Thank you.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.