我需要根据文字更改 Div Eliment 的颜色答案

【问题标题】：I need to change Div Eliment's color according to the text我需要根据文字更改 Div Eliment 的颜色
【发布时间】：2014-12-29 08:50:46
【问题描述】：

我想根据 span 标签内的内容更改 span 颜色，例如红色、绿色、蓝色、黄色，我不能使用 nth-child 或内联类。由于cms限制。我希望只有 css 才有可能，如果不可能，那么合适的方法是什么？

提前致谢

.selected-color span.value{
    color:grey;
}

.selected-color .value{
      color:grey; /*default color*/
}

<div class="selected-color">
    <div class="value">red</div>
    <div class="value">green</div>
    <div class="value">blue</div>
    <div class="value">yellow</div>
</div>

【问题讨论】：

标签： jquery html css

【解决方案1】：

在 jquery 中使用 .each() 迭代元素并获取当前对象 $(this) 并通过 jquery 为所有元素应用 css 颜色

$(".selected-color .value ").each(function() {

      var value=  $(this).text();
      $(this).css("color", value);
});

Fiddle

【讨论】：

【解决方案2】：

您可以使用 jQuery 来实现这一点。遍历 .value 元素，获取每个文本值并分配 ass css 属性color

$('.value').each(function () {
  var val = $(this).text();
  $(this).css({'color':val});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selected-color">
        <div class="value">red</div>
        <div class="value">green</div>
        <div class="value">blue</div>
        <div class="value">yellow</div>
    </div>

【讨论】：

【解决方案3】：

$(".selected-color .value ").each(function() {
     //If any leading or trailing space then remove it
      var value=  $(this).text().trim();
      $(this).css("color", value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="selected-color">
    <div class="value">red</div>
    <div class="value">green</div>
    <div class="value">blue</div>
    <div class="value">yellow</div>
</div>

【讨论】：

【解决方案4】：

你需要使用 jQuery，因为纯 CSS 不知道你的 div 的内容。

jQuery 代码：

<script type="text/javascript">
    $(".value").each(function( index ) {
        $(this).css("color", $(this).text());
    });
</script>

（如果您还没有加载 jQuery 库，请不要忘记将 jQuery 库加载到您的网站）。

正在工作jsfiddle。

【讨论】：

【解决方案5】：

无法通过 CSS 直接引用内容。您只能指向标签。如果你有一个标签，你可以设置一个类或引用一个属性或类似的，但永远不要直接内容（至少，据我所知）。

因此，在您的情况下，您必须将内容“重复”为类中的值，如下所示。

.selected-color > .value.red { color: red; }
.selected-color > .value.green { color: green; }
.selected-color > .value.blue { color: blue; }
.selected-color > .value.yellow { color: yellow; }

<div class="selected-color">
    <div class="value red">red</div>
    <div class="value green">green</div>
    <div class="value blue">blue</div>
    <div class="value yellow">yellow</div>
</div>

【讨论】：