javascript - jQuery - dynamically create classes to match existing classes -


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 have jquery @ page, see these classes , create 3 different classes.

opacity1{ opacity: 1 }  opacity.5{ opacity: 0.5 }  opacity0{ opacity: 0 } 

so when user adds class, eg "opacity75" element. want jquery script find "opacity" , find number attached it, use number create matching css class eg. opacity75{opacity:0.75}

i have little knowledge of js. need start me off in right direction. can save having loads of css classes.

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

this approach iterate through classes used in divs on page , create class, need kind of rule build style out of actual class name @ point of //add style string


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -