jQuery Take class name, and append its name to specific css rule?

Question

For example, if I have my HTML code like this:

<div class="color-ff0000"></div>

Is it posible for jQuery to take anything after "color-" and append it to class like this

color:ff0000

Basically to create dynamic classes?

I found what I need and here is the answer:

$("[class*='color'], [class*='bgcolor']").each(function() {
    var elClasses = $(this).attr('class').split ( ' ' );
    var elCur = $(this);
    for (var index in elClasses) {
        if (/^color-\w+$/.test(elClasses[index])) {
            var classColor = elClasses[index].split ( '-' )[1];
            elCur.css('color', '#' + classColor);
        }
        if (/^bgcolor-\w+$/.test(elClasses[index])) {
          var classBgColor = elClasses[index].split ( '-' )[1];
            elCur.css('background-color', '#' + classBgColor);
        }
    }
});

.height{
  width:200px;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-673AB7 height dfg  sefg bgcolor-ff0000 "><h1>Banana Developer</h1></div>

<div class="color-eeeeee height dfg  sefg bgcolor-212121 "><h1>Banana Developer</h1></div>

Also don't know why this question is marked as duplicate, the question is completely different from the one linked above. Also couldn't find this anywhere else on stackoverflow.

Get the class, split it on the dash, and take the last part. — j08691, Mar 23 '18 at 18:34

score 0 · Answer 1 · answered Mar 23 '18 at 18:37

0

You can split the class name by the dash, pop off the last part and append:

var _theDiv = $('div');
var className = _theDiv.attr('class');
console.log(className);
var color = className.split('-').pop();
console.log(color);
_theDiv.addClass(color);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-ff0000">Hi</div>

answered Mar 23 '18 at 18:37

StefanBob

4,857
2
32
38

Yeah, I get the part of class I need with this, it's showing up in console log... How can I add *#* to it and append it to css "color= # _(var color)_ " Thanks for your answer – Banana Developer Mar 23 '18 at 18:53
I don't think you can add to your css file like that with js. If you don't want to have a class for every color, you can just add the style directly with an inline style if you want like: _theDiv.css('color', color); – StefanBob Mar 23 '18 at 18:57
1

Yes, that's exactly what I wanted, thanks a lot, just to point to others if they need it sometime, it is actually `_theDiv.css('color', '#' + color);` instead of `_theDiv.css('color', color);` ... But you could also add hashtag to color variable... – Banana Developer Mar 23 '18 at 19:02
Np and good point sorry you are using the hex value, not color name – StefanBob Mar 23 '18 at 19:04

score 0 · Answer 2 · answered Mar 23 '18 at 19:03

Try this:

    (function($){
     var class_id = 1;
    $("body div").each(function(){
        var className = $(this).attr('class'); 
        var color_split = className.split('-'); 
        var new_class = "class_" + class_id;
        $("#style_block").append("." + new_class + "{" + color_split[0] + ":" + color_split[1] + ";" + "}");
        $(this).addClass(new_class );

        class_id++;
     }); 
 })(jQuery);

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<style type="text/css" id="style_block"></style>
<div class="color-#ff0000">test1</div>
<div class="background-#ff0000">test2</div>
<div class="color-blue">test3</div>

jQuery Take class name, and append its name to specific css rule?

2 Answers2