Javascript 根据使用CSS的文本值为div的文本着色_Javascript_Html_Css

Javascript 根据使用CSS的文本值为div的文本着色

javascript html css

Javascript 根据使用CSS的文本值为div的文本着色,javascript,html,css,Javascript,Html,Css,当文本由Javascript函数填充时，我需要将其样式设置为“div”。在初始页面加载时，“div”没有值。没有硬编码的值，当Javascript代码运行时，div的Open或Closed值将每天更改两次。下面是我正在使用的代码示例 <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Text Co

当文本由Javascript函数填充时，我需要将其样式设置为“div”。在初始页面加载时，“div”没有值。没有硬编码的值，当Javascript代码运行时，div的Open或Closed值将每天更改两次。下面是我正在使用的代码示例

    <! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Text Color Change</title>
        
        <style>
            .txtbx {
                border: 2px solid #000;
                width: 80px;
                height: 30px;
            }
            .txtbx[value="Open"]{
                color: green;
            }
            .txtbx[value="Closed"]{
                color: red;
            }
        </style>
        <script>
            function myFunction() {
        document.getElementById("txtbx1").innerHTML = "Open";
        document.getElementById("txtbx2").innerHTML = "Closed";
            }
        </script>
    </head>
    <body>
        <div id="txtbx1" class="txtbx"></div>
        <div id="txtbx2" class="txtbx"></div>
        <button id="btn1" onclick="myFunction()">Click Me</button>
    </body>
</html>

在我的特殊情况下，通过Javascript函数更改颜色不是一个选项。它必须通过CSS来完成。不知怎的

谢谢。

您正在寻找比css更复杂的样式表解决方案

我建议

没有能够匹配元素内容的CSS选择器。请看下面的图片

但是，可以使用属性选择器根据值设置样式。例如：

h1[数据文本=你好，绿色世界！]{color:green；} h1[data text=Hello red world！]{color:red；} 你好，绿色世界使用属性：

功能myFunction1{ document.getElementByIdtxtbx1.setAttribute'value'，打开； document.getElementByIdtxtbx2.setAttribute'value'，已关闭； } 功能myFunction2{ document.getElementByIdtxtbx2.setAttribute'value'，打开； document.getElementByIdtxtbx1.setAttribute'value'，已关闭； } .txtbx{ 边框：2×000；宽度：80px；高度：30px； } .txtbx[值=打开]{ 颜色：绿色； } .txtbx[值=关闭]{ 颜色：红色； } .txtbx:：之前{ 内容：价值观； } 点击我

点击我链接你的快速反应，但是，正如问题中提到的，我不能在我的特殊情况下使用Javascript。我想展示完整的代码，这就解释了这一点，但这样做需要几页。@AubreyLove我很困惑为什么可以使用JavaScript进行追加，但不能使用它来更改样式。无论如何，我会改变我的答案，换一个可能的解决方案。我没有听说过Sass，这将是我的学习曲线。但是谢谢你的提醒。

.txtbx:has(”Open”) {
Color: green;
}
.txtbx:has(”Closed”) {
Color: red;
}
.txtbx:contains(”Open”) {
Color: green;
}
.txtbx:contains(”Closed”) {
Color: red;
}