时间戳

首页 > 解决方案 > 如何使用 html 和 javascript 中的输入更改连接多个 id 以更改颜色

javascript - 如何使用 html 和 javascript 中的输入更改连接多个 id 以更改颜色

问题描述

我有一个网页，我想在输入静音或静音文本时远程或通过触摸屏进行操作。这是我必须的当前代码，如果单击，静音将变为红色，如果 init 更改为 on，则单击时颜色将变为绿色。我想知道如何将它与我想用 id="text" 和 id="text1" 操作的 html 代码结合起来。请指教。我希望能够输入静音，并且 text 或 text1 的 id 变为绿色，而 muteon 则 text 或 text1 将变为红色。谢谢！

HTML：

<div id="muteon">MuteOn</div>
<div id="mute">Mute</div>
<input onclick="off()"

Javascript：

function off() {
  document.getElementById("muteon").style.color = 'red';
}

function on() {
  document.getElementById("mute").style.color = 'green';
}

我想要操纵的 HTML 代码

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

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

标签： javascripthtmlcsstelnet

解决方案

我只是切换父类：

<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;
}

推荐阅读