Coloring a div based on text content using CSS & jQuery

Question

5.00/5 (1 vote)

See more:

Hi!
In our HTML we're using a class called content to mark certain DIV tags. I want to change the colour of the DIVs according to the text inside of them. One thing I need to clarify is that these DIVs are populated dynamically in a random fashion.
How can we change the color of these DIVs according to the text content.

HTML

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>

JavaScript

var content = $(".content p").text();

    if (content == "high") {

        $(this).css("color", "#ffffff");
    }
   if (content == "low") {

        $(this).css("color", "#ccc");
    }
   if (content == "critical") {

        $(this).css("color", "#000");
    }

Thanks in advance for your advice!

Posted 1-Oct-12 21:12pm

Kolli Hari Chowdary

Updated 1-Oct-12 21:20pm

Manfred Rudolf Bihy

v2

Add a Solution

Comments

Sandeep Mewara 2-Oct-12 3:31am

Not clear.

subhakarb 2-Oct-12 3:41am

hi,
hear we have a single div, this div in a grid view. So this div repeated n number of times. every time change the content (ex: Critical, high, medium, low) in side the div, depending on content i want change the font color.

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peeyush Pachaori · Answer 1 · 2012-10-01T22:09:00

Solution 1

use jquery for-each function over your div list. You can fetch the list using class selector. And inside the loop just check the text and change the color.

Posted 1-Oct-12 22:09pm

Peeyush Pachaori

Mohibur Rashid · Answer 2 · 2012-10-02T01:45:00

i believe that your site is created with some sort of server side application. change the div color from that application. you can add different css and just assign the class according to text. or you can simply assign style that would overload the class. besides javascript has nothing to do with your color based on text. if user choose those text from client side and server has nothing to do then you just can simply choose the color based on your input while you are creating the div

enhzflep · Answer 3 · 2012-10-02T03:01:00

You can do it with some simple javascript. I've declared an array of objects that have two fields each - content and color. If the innerHTML of the first childNode of each element with the class of 'content' is found in this array, the corresponding colour is applied to the div that contains the element with that innerHTML.

Enjoy!

HTML

<!DOCTYPE html>
<html>
<head>
<style>
</style>

<script>
    var CLASS_NAME = 'content';
    var strColorPairs = Array(
                                {'content' : 'high', 'color' : 'orange'},
                                {'content' : 'low', 'color' : 'blue'},
                                {'content' : 'medium', 'color' : 'green'},
                                {'content' : 'critical', 'color' : 'red'}
                            );

    function myInit()
    {
        var divList = document.getElementsByClassName( CLASS_NAME );
        var i, n = divList.length;

        for (i=0; i<n; i++)
        {
            curContent = divList[i].children[0].innerHTML;

            for (j=0; j<strColorPairs.length; j++)
            {
                if (strColorPairs[j].content == curContent)
                    divList[i].style.color = strColorPairs[j].color;
            }
        }
    }
</script>

</head>
<body onload='myInit();'>
    <div class="content">
        <p>high</p>
    </div>
    <div class="content">
        <p>low</p>
    </div>
    <div class="content">
        <p>medium</p>
    </div>
    <div class="content">
        <p>critical</p>
    </div>
</body>
</html>

shishkbob · Answer 4 · 2014-06-16T13:45:00

I needed something like this for my project, based on the text of the links.

jQuery

JavaScript

$(".content:contains('low')").addClass("green");
$(".content:contains('medium')").addClass("yellow");
$(".content:contains('high')").addClass("orange");
$(".content:contains('critical')").addClass("red");

The key is the :contains() function.

CSS

CSS

.red { color: red; }
.green { color: green; }
.orange { color: orange; }
.yellow { color: yellow; }

HTML

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>

jsfiddle

I'm pretty new to jQuery, so there still might be a better way.

Coloring a div based on text content using CSS & jQuery

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0