Add CSS rule via jQuery for future created elements

Question

I have a somewhat unusual issue. I've done something like this many times:

$('#selector').css('color','#00f');

My problem is that I create a <div id="selector">, and I call the command above and it works fine.

Now, on another event, later, I remove that element from the DOM and add it again at a later time with the same id. This element now doesn't have color:#00f.

Is there a way that I can add a rule in CSS, such that it will affect items that are created in the future with that same id/class? I like jQuery, but anything with plain JavaScript would be fine as well.

It has to be dynamic, and I don't know the classes to put in a CSS file. Also, I plan on changing a single attribute a few different times through the course of the application. For example, setting the color to black, to blue, to red, and back to black.

I went with the answer from @lucassp, and this is what I ended up with:

function toggleIcon(elem, classname)
{
    if($(elem).attr('src')=='img/checkbox_checked.gif')
    {
        $(elem).attr('src', 'img/checkbox_unchecked.gif')
        //$('.'+classname).hide();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:none; }</style>'));
    }
    else
    {
        $(elem).attr('src', 'img/checkbox_checked.gif')
        //$('.'+classname).show();//this was the old line that I removed
        $('html > head').append($('<style>.'+classname+' { display:block; }</style>'));
    }
}

I also want to say that @Nelson is probably the most "correct", though it would require more work to go into application code that always works fine, and that's not effort I want to spend at the moment.

If I had to rewrite this (or write something similar) in the future, I would look into detach().

`.css()` sets style attribute of the `$('#selector')`. It does not create a css rule. — Zefiryn, Oct 25 '12 at 19:40
I know that, that's exactly what I'm asking, I want to create a rule, not just adjust an attribute — Landon, Oct 25 '12 at 19:59
I was just pointing it out as you seemed to be surprised with the result of `.css()` method. The responses are giving you some direction how to handle this. — Zefiryn, Oct 25 '12 at 20:01
No, I'm not surprised by it. I'm quite familiar with `css()`, and I know it just edits the matched DOM elements and doesn't make a permanent rule — Landon, Oct 25 '12 at 20:04

score 94 · Accepted Answer · edited Sep 27 '15 at 11:02

94

This should work:

var style = $('<style>.class { background-color: blue; }</style>');
$('html > head').append(style);

edited Sep 27 '15 at 11:02

Peter Mortensen

30,738
21
105
131

answered Oct 25 '12 at 19:39

lucassp

4,133
3
27
36

13

Slightly cheaper js: $('').appendTo('head'); http://jsfiddle.net/b9chris/LNYaR/ – Chris Moschini Apr 08 '13 at 08:36
5

how would you remove that style in the head if needed later? – Philll_t Apr 16 '14 at 04:35
1

@Felipe $("style").replaceWith might help rerender css rules. – Nasser Al-Wohaibi Apr 28 '14 at 09:56
This doesn't work for changing a `max-height` style (it's been set to 400px in CSS but I want to change it to 300px). Is there any workaround? – Keir Simmons Aug 17 '14 at 12:15
@KeirSimmons add !important to the rule to override it (as long as max-height was not applied inline with matching priority) – Mavelo Oct 17 '14 at 11:00
6

@Philll_t give the style an id e.g $('').appendTo('head'); $("#customstyle").remove(); – Adam Jimenez Nov 12 '15 at 15:00
If this doesn't work for someone, see my answer which has "!important " added. – codemirror Sep 22 '17 at 05:40

score 12 · Answer 2 · edited Sep 27 '15 at 11:27

12

When you plan to remove elements from the DOM to re-insert them later, then use .detach() instead of .remove().

Using .detach() will preserve your CSS when re-inserting later. From the documentation:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

edited Sep 27 '15 at 11:27

Peter Mortensen

30,738
21
105
131

answered Oct 25 '12 at 19:38

Nelson

49,283
8
68
81

2

You first detach and save the element in a variable: `var p = $("#myelement").detach();` then later you can insert your element again with `$('#somediv').append(p);` or the equivalent `p.appendTo('#somediv');` – Nelson Oct 25 '12 at 22:56

score 8 · Answer 3 · edited Sep 14 '18 at 15:27

8

In case this style section suppose to be changed several times, you can set in the html file a style tag with id:

<style id="myStyleTag">
</style>

then you can refer it with js, edit or remove content like:

var style = $('#myStyleTag');
styl.html('.class { background-color: blue; }');

in this way the style section will not become bigger if you change it several times because you don't just append it to the head but edit it as needed.

edited Sep 14 '18 at 15:27

TylerH

20,799
66
75
101

answered Dec 15 '15 at 15:26

amichai

718
9
19

@kokociel please do not make changes to other authors' code. If you think the code is wrong or has a typo in it, leave a comment! – TylerH Sep 14 '18 at 15:27
1

Hmm isn't this asserting that we'd be undermining the author's intent? That maybe an author wanted to write code with subtle mistakes? I wonder what purpose the 3rd-party editing functionality is supposed to offer, if not for the correction of minor mistakes. – kokociel Sep 15 '18 at 16:31

score 7 · Answer 4 · edited Sep 27 '15 at 11:36

Here is some JavaScript code I wrote before to let me add, remove and edit CSS:

function CSS(sheet) {

    if (sheet.constructor.name === 'CSSStyleSheet' )
        this.sheet = sheet;
    else if (sheet.constructor.name === 'HTMLStyleElement')
        this.sheet = sheet.sheet;
    else
        throw new TypeError(sheet + ' is not a StyleSheet');
}

CSS.prototype = {
    constructor: CSS,
    add: function( cssText ) {
        return this.sheet.insertRule(cssText, this.sheet.cssRules.length);
    },
    del: function(index) {
        return this.sheet.deleteRule(index);
    },
    edit: function( index, cssText) {
        var i;
        if( index < 0 )
            index = 0;
        if( index >= this.sheet.cssRules.length )
            return this.add(cssText);
        i = this.sheet.insertRule(cssText, index);
        if (i === index)
            this.sheet.deleteRule(i + 1);
        return i;
    }
};

And then if a new stylesheet is required, construct as

var myCss = new CSS(document.head.appendChild( document.createElement('style')));

score 1 · Answer 5 · edited Sep 27 '15 at 11:26

1

The best option would be to add a class:

.selected {
    color : #00f ;
}

$('#elemId').addClass('selected')

edited Sep 27 '15 at 11:26

Peter Mortensen

30,738
21
105
131

answered Oct 25 '12 at 19:37

Sushanth --

55,259
9
66
105

score 1 · Answer 6 · answered Oct 25 '12 at 19:38

1

You can use livequery plugin.

$('#selector').livequery(function() { $(this).css('color', '#00f'); });

answered Oct 25 '12 at 19:38

Almir Sarajčić

1,520
3
16
19

6

why would this need a plugin? – Landon Oct 25 '12 at 19:43

score 1 · Answer 7 · answered Oct 24 '17 at 15:06

This is an old question with a chosen answer, but adding dynamic CSS to accomplish the goal is not necessary and is likely sending people in the wrong direction.

If you want to dynamically set styles on an element using jQuery, it is best to use .addClass() and .removeClass() with classes that affect the required style.

Given the function in the question:

function toggleIcon(elem, classname)
    {
      if($(elem).attr('src')=='img/checkbox_checked.gif')
    {
        $(elem).attr('src', 'img/checkbox_unchecked.gif');
        $("." + classname).addClass("hidden");
    }
    else
    {
        $(elem).attr('src', 'img/checkbox_checked.gif');
        $("." + classname).removeClass("hidden");
    }
}

And then just add this to your CSS:

.hidden {display: none;}

This would also work to change color, as also mentioned in the question:

.checkbox-red {color: red;}
.checkbox-blue {color: blue;}

score 1 · Answer 8 · answered Mar 19 '20 at 20:26

1

There is nothing wrong with the accepted answer. But if you wanted to do this in just one line, you could do something like this:

$('<style>').append('.'+classname+'{display:none}').appendTo('head')

answered Mar 19 '20 at 20:26

PHP Guru

1,301
11
20

score 0 · Answer 9 · edited Sep 27 '15 at 11:28

0

Create a CSS rule in your CSS file

.yourclass{
    color: #00f;
}

Add yourclass whenever you're creating the element:

$("#selector").addClass("yourclass");

edited Sep 27 '15 at 11:28

Peter Mortensen

30,738
21
105
131

answered Oct 25 '12 at 19:38

Anoop

23,044
10
62
76

it has to be dynamic, I don't know the classes to put there – Landon Oct 25 '12 at 19:40
I don't have control of adding classes to the element when it's created – Landon Oct 25 '12 at 19:44

score 0 · Answer 10 · edited Sep 27 '15 at 11:29

0

Just use a class, for example:

CSS:

.setcolor { color: #fff; }

JavaScript:

$('#selector').addClass('setcolor');

Then remove it when needed:

$('#selector').removeClass('setcolor');

edited Sep 27 '15 at 11:29

Peter Mortensen

30,738
21
105
131

answered Oct 25 '12 at 19:40

gregwhitworth

2,136
4
22
33

score 0 · Answer 11 · answered Dec 17 '21 at 12:03

0

If you already have a style element in your document, you can just add another rule to it with vanilla js:

document.styleSheets[0].addRule('#selector', 'color: #00f');

answered Dec 17 '21 at 12:03

Protector one

6,926
5
62
86

score -1 · Answer 12 · answered Apr 12 '17 at 07:33

-1

Try this

var style = $('<style>.class { background-color: blue !important; }</style>');
$('html > head').append(style);

answered Apr 12 '17 at 07:33

codemirror

3,164
29
42

Add CSS rule via jQuery for future created elements

12 Answers12

Linked

Related