jQuery 取类名，并将其名称附加到特定的 css 规则？ [复制]

Posted 2023-03-16

【中文标题】jQuery 取类名，并将其名称附加到特定的 css 规则？ [复制]

【英文标题】：jQuery Take class name, and append its name to specific css rule? [duplicate]

【发布时间】：2018-09-02 12:23:33

【问题描述】：

例如，如果我的 html 代码是这样的：

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

jQuery 是否可以在 "color-" 之后获取任何内容并将其附加到这样的类中

color:ff0000

基本上是创建动态类？

我找到了我需要的东西，这就是答案：

$("[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>

也不知道为什么这个问题被标记为重复，这个问题与上面链接的问题完全不同。在***的其他任何地方也找不到这个。

【问题讨论】：

你可以使用 javascript 的 substring(start,end) 方法。

获取课程，在破折号上拆分，然后学习最后一部分。

【参考方案1】：

你可以用破折号分割类名，弹出最后一部分并追加：

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>

【讨论】：

是的，我得到了我需要的类的一部分，它显示在控制台日志中......我怎样才能将 # 添加到它并将它附加到 css “ color= # (var color) " 感谢您的回答

我不认为你可以像用js那样添加到你的css文件中。如果您不想为每种颜色都有一个类，您可以直接使用内联样式添加样式：_theDiv.css('color', color);

是的，这正是我想要的，非常感谢，如果他们需要的话，只是为了指向其他人，它实际上是 _theDiv.css('color', '#' + color); 而不是 _theDiv.css('color', color); ...但你也可以添加标签到颜色变量...

Np 很抱歉，您使用的是十六进制值，而不是颜色名称

【参考方案2】：

试试这个：

    (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>