jquery adding a class to styles only once

Question

I have code which allows adding a class to 'style' section.

function appendCssClassToStyle(clas, prprty, val)
{
  $('#myStyle').append('.' + clas + '{' + prprty + ':' + val + ';}');
}

This code adds the class many times. The problem is that I would like to be able to add a class only if it does not exist in the styles section yet. How can I do this? Thanks for help !

can you please add more description ? add you html too. Thanks — Muhammad Usman, Apr 06 '18 at 13:43
What exactly are you trying to achieve? Whatever it is I can guarantee you there is a better and easier way — Rory McCrossan, Apr 06 '18 at 13:43
May I ask what your reason is to want new style declarations added directly to a ` — Brainfeeder, Apr 06 '18 at 13:53

Brainfeeder · Answer 1 · 2018-04-06T13:59:14.140

0

I think you should read up on the use of jQuery and how inline styles are added to html elements...

inline style:

<div class="someEl" style="background-color:#ff0000;">Some awesome text</div>

This element has a class .someEl which you can style in a CSS stylesheet:

.someEl {
    background-color:#fff; /* setting bg color to white */
    color:#000; /* setting font color to black */
}

Above would result in a div with a red (#ff0000) background since inline styles will overwrite styles from stylsheets.

With jQuery you can add and remove inline styles from the element. Adding inline styles:

$('.someEl').css({
   'color': '#fff',
   'backgroundColor': '#ff0000'
});

Removing inline styles:

$('.someEl').css('backgroundColor', '');

edited Apr 06 '18 at 13:59

answered Apr 06 '18 at 13:41

Brainfeeder

2,604
2
19
37

That's not what the OP asked. He wants to add a CSS class definition into a – Mario Cianciolo Apr 06 '18 at 13:43
@MarioCianciolo which itself is a bad idea. This is a better way, although I agree that the answer should have explained that. It is flawed though as `prprty` is a dynamic key, so this syntax won't work. – Rory McCrossan Apr 06 '18 at 13:43
I agree that's a bad idea, but your answer is still invalid. – Mario Cianciolo Apr 06 '18 at 13:44
A yes, I thought he was trying to do `style=".className{prprty:val}"` – Brainfeeder Apr 06 '18 at 13:49
@MarioCianciolo nevertheless, I think the OP is trying to do what the `$.css()` function exists for.. – Brainfeeder Apr 06 '18 at 13:55

score 0 · Answer 2 · answered Apr 06 '18 at 13:55

0

You could use something like this:

$('.element:not(.class-name)').addClass('class-name');

as mentioned here https://stackoverflow.com/a/33265116/2469264

answered Apr 06 '18 at 13:55

Lazaro Henrique

527
5
7

score 0 · Answer 3 · edited Apr 06 '18 at 14:01

0

You can try this

function appendCssClassToStyle(clas, prprty, val)
{
  //var prprty = 'text-align';
  //var val = 'center';
  $('.' + clas).css(prprty,val);
}

edited Apr 06 '18 at 14:01

Sarvap Praharanayuthan

4,212
7
47
72

answered Apr 06 '18 at 13:56

Karthikeyan m

69
3

jquery adding a class to styles only once

3 Answers3