如何使用 html 和 javascript 中的输入更改多个 id 颜色答案

【问题标题】：How to change multiple id color using input in html and javascript如何使用 html 和 javascript 中的输入更改多个 id 颜色
【发布时间】：2020-08-05 14:13:47
【问题描述】：

我有一个网页，我想在输入静音或静音文本时远程或通过触摸屏操作。这是我当前的代码，如果调用 togglemute() muteon 将变为红色，如果 mute 将变为绿色。我想知道如何将它与我想在底部操作的 html 代码结合起来，以便在输入文本静音或静音文本时 id="text" 和 id="text1" 改变颜色。请指教。谢谢！

HTML：

<div class="mute-container">
    <div class="mute-on">Mute On</div>
    <div class="mute-off">Mute Off</div>
</div>

JavaScript：

function toggleMute() {
    document.querySelector('.mute-container').classList.toggle('on');
}

CSS：

.mute-container.on .mute-on {
    color: red;
}

.mute-container:not(.on) .mute-off {
    color: green;
}

HTML 想要被操纵/合并：

<h1 class="l1-txt1 txt-center p-t-0 p-b-10">
    <p id="text1" style="color:white; font-weight: 600"></p>
</h1>

<h1 class="l1-txt1 txt-center p-t-0 p-b-60">
    <p id="text" style="color:crimson; font-weight: 600"></p>
</h1>

【问题讨论】：

您希望哪些部分最终被“放置”到哪里 - 例如，仅内部 HTML（文本“静音开/关”）或整个容器？换句话说：您希望最终的 HTML 结果是什么样的？
我希望最终的 html 只显示 id="text" 和 "text1"。我有两个网页，所以在另一个网页上，这是我的自定义页面
所以，如果您想要将上述样式 + 样式更改应用于下面代码中的元素（id="text" 和 "text1"），您可以 a)给他们相应的类名（取决于你想要的红色和绿色），或者 b) 将元素的 id 添加到类旁边的规则中。
我该怎么做，我对编程和 html 还是很陌生 @m1ck

标签： javascript html css telnet

【解决方案1】：

假设您希望text1 对应于mute-on 的行为，即在打开时变为red，并且text 的行为类似于mute-off，即在打开时变为green (必要时切换）。我还将假设您希望text1 的切换颜色为white，而text 的切换颜色为crimson，根据您的内联CSS。

那么这里有一个简单的方法来做到这一点：

a) 在下面的 HTML 代码周围添加一个容器元素，并为其指定类 mute-container。像这样：

<div class="mute-container">

    <h1 class="l1-txt1 txt-center p-t-0 p-b-10">
        <p id="text1" style="color:white; font-weight: 600"></p>
    </h1>

    <h1 class="l1-txt1 txt-center p-t-0 p-b-60">
        <p id="text" style="color:crimson; font-weight: 600"></p>
    </h1>

</div>

b) 将 mute-on 和 mute-off 类添加到 id 为 text1 和 text 的元素中：

<div class="mute-container">

    <h1 class="l1-txt1 txt-center p-t-0 p-b-10">
        <p id="text1" class="mute-on" style="color:white; font-weight: 600"></p>
    </h1>

    <h1 class="l1-txt1 txt-center p-t-0 p-b-60">
        <p id="text" class="mute-off" style="color:crimson; font-weight: 600"></p>
    </h1>

</div>

c) 最后，为了使内联定义的默认颜色（white 和 crimson）不会覆盖切换颜色（red 和 green），

将 !important; 添加到非内联 CSS 规则中：

.mute-container.on .mute-on {
    color: red !important;
}

.mute-container:not(.on) .mute-off {
    color: green !important;
}

或

将默认颜色的内联 CSS 移动到非内联 CSS 中（并内联删除它们）：

.mute-container .mute-on { /* text1 - will turn red when toggled on */
    color: white;
}

.mute-container .mute-off { /* text - will turn green when toggled on */
    color: crimson; 
}

希望这会有所帮助！

【讨论】：