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.

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
– Jay Blanchard, Commented Apr 14, 2014 at 12:54

Kevkong · Accepted Answer · 2014-04-14 13:00:59Z

1

    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

answered Apr 14, 2014 at 13:00

Kevkong

4603 silver badges16 bronze badges

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

1 Comment

Kevkong Over a year ago

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.

D4V1D · Accepted Answer · 2014-04-14 13:03:29Z

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, 2014 at 13:03

answered Apr 14, 2014 at 12:52

D4V1D

5,8493 gold badges34 silver badges68 bronze badges

4 Comments

Simon Over a year ago

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}

Jay Blanchard Over a year ago

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.

D4V1D Over a year ago

Just edit my post to a simple solution. Having the value of the opacity within the class name would be much more complex.

astroanu Over a year ago

This is the best approach to this.

kpblc · Accepted Answer · 2014-04-14 13:39:45Z

0

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

answered Apr 14, 2014 at 13:39

kpblc

9021 gold badge8 silver badges24 bronze badges

1 Comment

kpblc Over a year ago

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

Collectives™ on Stack Overflow

jQuery - dynamically create classes to match existing classes

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related