我需要根据文本更改Div Eliment的颜色

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

预先感谢

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

来源

2014-12-29 Tahir

迭代中的jquery与.each()的元素，并采取当前对象$(this)并通过jquery的应用CSS颜色所有元素

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

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

Fiddle

来源

2014-12-29 08:53:02

你可以用jQuery实现这个。遍历.value的元素，让每一个文本值并分配屁股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>

来源

2014-12-29 08:54:18 kapantzak

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

来源

2014-12-29 08:56:46 Sadikhasan

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

jQuery代码：

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

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

并正在工作jsfiddle。

来源

2014-12-29 09:08:07 constantine

不可能通过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>

来源

2014-12-29 09:12:50

我需要根据文本更改Div Eliment的颜色

回答

相关问题