我可以使用Javascript根据嵌套的span标记包含的值更改其背景颜色吗？

我想根据包含的文本更改以下HTML中跨度背景的颜色：

AAA

不幸的是，我不能更改HTML，它是由Knack生成的，所以我不能向span中添加类。但是我想使用JQuery根据span包含的内容将背景颜色更改为几个选项之一。因此，如果它包含“AAA”，它将是绿色的，“Exec”，它将是蓝色的，“Media”，它将是黄色的，等等。这是可能的吗

为任何能帮忙的人干杯！我找到了一些代码来实现这一点，但这取决于span本身是否应用了一个类，而我的没有。有什么想法吗

---

提前感谢堆

您也可以使用普通JavaScript来实现这一点。 只需选择span标记并检查其innerHTML是否包含要比较的关键字

let div=document.querySelector（“.kn detail body”）；
设spanContainer=div.querySelector（“span”）；
设span=spanContainer.querySelector（“span”）；
if（span.innerHTML.includes（“AAA”））{
span.style.backgroundColor=“绿色”；
}
else if（span.innerHTML.includes（“Exec”））{
span.style.backgroundColor=“蓝色”；
}
else if（span.innerHTML.includes（“媒体”））{
span.style.backgroundColor=“黄色”；
}

AAA

您也可以使用普通JavaScript来实现这一点。 只需选择span标记并检查其innerHTML是否包含要比较的关键字

let div=document.querySelector（“.kn detail body”）；
设spanContainer=div.querySelector（“span”）；
设span=spanContainer.querySelector（“span”）；
if（span.innerHTML.includes（“AAA”））{
span.style.backgroundColor=“绿色”；
}
else if（span.innerHTML.includes（“Exec”））{
span.style.backgroundColor=“蓝色”；
}
else if（span.innerHTML.includes（“媒体”））{
span.style.backgroundColor=“黄色”；
}

AAA

你可以这样做

var span=document.getElementsByTagName（“span”）；
对于（i=0；i你可以这样做


var span=document.getElementsByTagName（“span”）；
对于（i=0；i，这里有一个jquery版本，它带有一个switch语句，使添加更多颜色变得非常简单


$（'.kn详细主体跨度[class]'）。每个（函数（）{
$class=“”；
开关（$（this.text（）.trim（））{
案例“AAA”：
$class='green'；
打破
案例“执行官”：
$class='blue'；
打破
“媒体”案例：
$class='yellow'；
打破
}
if（$class）$（this）.addClass（$class）；
})
.blue{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：蓝色；
颜色：#fff；
}
格林先生{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：绿色；
颜色：#fff；
}
黄先生{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：黄色；
}

AAA
执行官
媒体
这是一个jquery版本，它带有一个switch语句，可以轻松添加更多颜色


$（'.kn详细主体跨度[class]'）。每个（函数（）{
$class=“”；
开关（$（this.text（）.trim（））{
案例“AAA”：
$class='green'；
打破
案例“执行官”：
$class='blue'；
打破
“媒体”案例：
$class='yellow'；
打破
}
if（$class）$（this）.addClass（$class）；
})
.blue{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：蓝色；
颜色：#fff；
}
格林先生{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：绿色；
颜色：#fff；
}
黄先生{
填充物：5px；
边界半径：4px；
右边距：2px；
显示：内联块；
背景颜色：黄色；
}

AAA
执行官
媒体
您可以通过span文本及其颜色创建对象，因此当它与span文本匹配时，它将渲染该颜色，否则不会

以下是一个例子：


让对象颜色={
“AAA”：“绿色”，
“执行官”：“蓝色”，
“媒体”：“黄色”
}
设div=document.querySelector（“.kn细节体”）；
var span=div.getElementsByTagName（“span”）；
对于（i=0；i，您可以通过span文本及其颜色创建对象，因此当它与span文本匹配时，它将渲染该颜色，否则不会

以下是一个例子：


让对象颜色={
“AAA”：“绿色”，
“执行官”：“蓝色”，
“媒体”：“黄色”
}
设div=document.querySelector（“.kn细节体”）；
var span=div.getElementsByTagName（“span”）；
对于（i=0；i请显示您的尝试。请显示您的尝试。干杯，这太完美了！这样我可以轻松地进行多个样式更改。感谢您的帮助。干杯，这太完美了！这样我可以轻松地进行多个样式更改。谢谢您的帮助。