我需要根據文本更改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的顏色

回答

相關問題