Can I change the background colour of a nested span tag depending on value it contains, using Javascript?

Question

I want to change the colour of the span background in the following HTML depending on the text it contains:

<div class="kn-detail-body">
    <span>
        <span class="">AAA</span>
    </span>
</div>

Unfortunately I can't change the HTML, it's generated from Knack, so I can't add a class to the span. But I want to use JQuery to change the background colour to one of a few choices based on what the span contains. So if it contains 'AAA', it will be green, 'Exec' and it will be blue, 'Media' and it will be yellow, etc. Is this possible?

Cheers to anyone who can help! I found some code to do this but it depends on the span itself having a class applied, which mine don't. Any ideas?

Thanks heaps in advance!

score 1 · Answer 1 · answered Jun 09 '21 at 06:24

You can do this with plain JavaScript as well. Just select the span tag and check if its innerHTML contains the keywords you want to compare

let div = document.querySelector(".kn-detail-body");
let spanContainer = div.querySelector("span");
let span = spanContainer.querySelector("span");

if(span.innerHTML.includes("AAA")){
    span.style.backgroundColor = "green";
}
else if(span.innerHTML.includes("Exec")){
    span.style.backgroundColor = "blue";
}
else if(span.innerHTML.includes("Media")){
    span.style.backgroundColor = "yellow";
}

<div class="kn-detail-body">
<span>
<span class="">AAA</span>
</span>
</div>

score 1 · Answer 2 · answered Jun 09 '21 at 06:24

you can do it like this

var span =  document.getElementsByTagName("span");
for(i=0 ; i<span.length ; i++){
    if( span[i].innerHTML == "AAA"){
        span[i].style.backgroundColor="green"
    }
    else if( span[i].innerHTML == "Exec"){
        span[i].style.backgroundColor="blue"
    }
    else if( span[i].innerHTML == "Media"){
        span[i].style.backgroundColor="yellow"
    }
}

<span>AAA</span>
<span>Exec</span>
<span>Media</span>

score 1 · Answer 3 · answered Jun 09 '21 at 06:50

You can make object by span text and its color, so when it will match with span's text then it will render that color else not.

Here is the example:

 let objColor = {
   "AAA": "green",
   "Exec": "blue",
   "Media": "yellow"
}
let div = document.querySelector(".kn-detail-body");
var span =  div.getElementsByTagName("span");
for(i=0 ; i<span.length ; i++){
  span[i].style.backgroundColor=objColor[span[i].innerHTML]
}

<div class="kn-detail-body">
<span><span>AAA</span></span>
<span><span>Exec</span></span>
<span><span>Media</span></span>
<span><span>test</span></span>
</div>

Kinglish · Accepted Answer · 2021-06-09T06:44:14.040

Here's a jquery version with a switch statement to make adding more colors pretty easy.

$('.kn-detail-body span[class]').each(function() {
  $class = "";
  switch ($(this).text().trim()) {
    case 'AAA':
      $class = 'green';
      break;

    case 'Exec':
      $class = 'blue';
      break;

    case 'Media':
      $class = 'yellow';
      break;
  }

  if ($class) $(this).addClass($class);
})

.blue {
  padding: 5px;
  border-radius: 4px;
  margin-right: 2px;
  display: inline-block;
  background-color: blue;
  color: #fff;
}

.green {
  padding: 5px;
  border-radius: 4px;
  margin-right: 2px;
  display: inline-block;
  background-color: green;
  color: #fff;
}

.yellow {
  padding: 5px;
  border-radius: 4px;
  margin-right: 2px;
  display: inline-block;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kn-detail-body">
  <span><span class="">AAA</span></span>
  <span><span class="">Exec</span></span>
  <span><span class="">Media</span></span>
</div>

Cheers, this is perfect! This way I can make multiple style changes easily. Thanks for your help. — user1582702, Jun 09 '21 at 10:24

Can I change the background colour of a nested span tag depending on value it contains, using Javascript?

4 Answers4