jQuery - dynamically create classes to match existing classes

Question

I have 3 divs

<div class="box opacity1 red"></div>
<div class="box opacity.5 green"></div>
<div class="box opacity0 blue"></div>

I want to have jQuery look at the page, see these classes and then create three different classes.

opacity1{
opacity: 1
}

opacity.5{
opacity: 0.5
}

opacity0{
opacity: 0
}

So when a user adds a class, eg "opacity75" to an element. I want the jQuery script to find "opacity" and then find what number is attached to it, then use that number to create a matching css class eg. opacity75{opacity:0.75}

I have very little knowledge of JS. I need some help to start me off in the right direction. This can save having loads of CSS classes.

[Something](http://stackoverflow.com/questions/1212500/jquery-create-css-rule-class-runtime) to take a look at for you. — Batu.Khan, Apr 14 '14 at 12:52
or http://stackoverflow.com/questions/4232557/jquery-css-write-into-the-style-tag — Raphaël Althaus, Apr 14 '14 at 12:53
Have you tried anything at all? Are you wanting to write static CSS, or just automagically create CSS based on the classes that you have assigned? If so it could be a lengthy plugin! — Jay Blanchard, Apr 14 '14 at 12:54
@JayBlanchard, to have it does automatically. I have had a look around stackoverflow and found this: http://jsbin.com/emoro/8/edit - how lengthy are we talking? would it be hard to do? — Simon, Apr 14 '14 at 13:00
I would say that this is not a trivial project, you could end up spending a lot of time (and perhaps a lot of overhead) on it. Is it worth the trade-off? — Jay Blanchard, Apr 14 '14 at 13:02
I think a lot of the value of using classes is to give some semantic meaning to what an object is (not necessarily how it looks). What you are trying to do is no different than using the style attribute, except that it is much more complicated. Why are you trying to do this? Also, you mention that this could, "save having loads of CSS classes," but given your example; I find that very difficult to believe. — user3334690, Apr 14 '14 at 13:13
For instance if you have a lot of animation-delay's it would save the need for having a number of different classes. — Simon, Apr 14 '14 at 16:16
wow.js uses the data attibute instead of classes to delay animations. maybe that could be adapted some how https://github.com/matthieua/WOW/blob/master/dist/wow.js — Simon, May 06 '14 at 19:26
Have you considered accepting one of the answer as a suitable answer for your question? — D4V1D, Mar 24 '15 at 15:08

D4V1D · Answer 1 · 2014-04-14T13:03:29.333

1

I'm not sure how it is even possible to create CSS classes in jQuery but here is a piece of code that'll do what you're expecting

Edit

$(function() {
    $('.opacity').each(function() {
        $(this).css('opacity', $(this).data('opacity')); 
    });
});

And add data-opacity="XX" to your <div> tags.

JSFiddle

edited Apr 14 '14 at 13:03

answered Apr 14 '14 at 12:52

D4V1D

5,805
3
30
65

So when a user adds a class "opacity75" to an element. I want the jQuery script to find "opacity" and then see what number is attached to that, then use that number to create a matching css class eg. opacity75{opacity:0.75} – Simon Apr 14 '14 at 12:57
It's much more complex, you have to reead through each class assigned to an element, then parse them, then create CSS rules for each. This is a BIG project. – Jay Blanchard Apr 14 '14 at 13:01
Just edit my post to a simple solution. Having the value of the opacity within the class name would be much more complex. – D4V1D Apr 14 '14 at 13:04
This is the best approach to this. – astroanu Apr 14 '14 at 13:22

score 1 · Answer 2 · answered Apr 14 '14 at 13:00

    var stylestring = "<style type=\"text/css\">";
    $("div").each(function() {
      $.each($(this).attr("class").split(" "), function () {
        var class = this + " {";
        //add style to string
        class += "}";
        stylestring += class;
      });
    });
    stylestring += "</style>";
    $(document.body).prepend($(stylestring));

This would be my approach to iterate through all classes used in divs all over the page and create the class, but you would need some kind of rule to build the style out of the actual class name at the point of //add style to string

Just realized this is not all-embracing at all. You should test if you already added the class to the `stylestring` before add it another time. As mentioned in the post you would need some kind of rule to parse the class name and set the style according to it. — Kevkong, Apr 14 '14 at 13:07

score 0 · Answer 3 · answered Apr 14 '14 at 13:39

1) yor example, its not best way to set css via js
2) i think task is to set some styles to elements, so its not necessarily to create classes. jquery can set styles to elements via .css("property","value") method
3) example of code, which might work

// get all elements which contains 'opacity' in class name 
var opacityElems = $( "div[class*='opacity']" );

var elemClassName;
var elemOpacityValue;

// cycle through all this elements
opacityElems.each(function(i,elem) {

    // write the class name of the current element as a string
    elemClassName = $(elem).attr('class');

    // remove first 7 simbols, so only last numbers left
    elemOpacityValue = elemClassName.substring(7, elemClassName.length);

    // because obtained in the previous one step is a string, then give her number
    // ie "0.12" to 0.12
    elemOpacityValue *= 1;

    // set style to element
    $(elem).css("opacity",elemOpacityValue);

})

p.s. i am sorry for the mistakes - English is not the native language

it's just example, i don't test it. better look at answer that give Steve. his variant 100% working, and its look much pretty — kpblc, Apr 14 '14 at 14:13

jQuery - dynamically create classes to match existing classes

3 Answers3