0

我们基本上在表格中有单选按钮的这个 html 代码：

<div class="graytitle">Wie oft nutzen Sie WhatsApp?</div>
<ul class="pageitem">
    <li class="radiobutton"><span class="name">Sehr oft</span>
    <input name="frage10" type="radio" value="sehr oft" /></li>
    <li class="radiobutton"><span class="name">Mittelmäßig</span>
    <input name="frage10" type="radio" value="mittel" /></li>
    <li class="radiobutton"><span class="name">Ehr selten</span>
    <input name="frage10" type="radio" value="ehr selten" /></li>
</ul>

我们想让行变灰而不使文本不可见，我们搜索了很多，但找不到解决方案。这是我们使用的：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
document.UmfrageForm.frage10[i].style.backgroundColor = "gray"; }

它使所有行变灰，包括文本。我们希望文本在将行设为灰色后仍然可见。我们怎么能做到这一点？

灾难截图：

在此处输入图像描述

4

3 回答 3

1

根据您的 jsfiddle：您的样式表将您的跨度标签定位在您的输入标签后面，这就是为什么您在删除输入透明度后看不到跨度的原因。

您需要做的是将背景颜色应用于跨度标签，而不是输入标签。

[更新] 正如评论中提到的@alicelieutier，如果您只需要支持最近的浏览器，您还可以选择对输入应用半透明背景：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
  document.UmfrageForm.frage10[i].style.backgroundColor = "rgba(0,0,0,0.7)";
}
于 2013-04-17T22:44:48.443 回答
0

不知道这是否可能，但您可以id为每个li或span元素添加属性。

假设您提供以下 id：frage10_opt1, frage10_opt2, frage10_opt3. 然后，您可以使用以下代码更改文本颜色：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
    document.UmfrageForm.frage10[i].style.backgroundColor = "gray";
    document.getElementById("frage10_opt" + (i + 1)).style.color = "black";
}
于 2013-04-17T22:07:52.973 回答
0

我有点困惑。您想在某个事件触发时将行“灰显”还是希望它们始终“灰显”？

我认为 Michal 代码的问题在于您正在为表单的单选元素运行循环，并且您的文本位于元素之前的 span 标签中。您可以尝试获取 radio 元素的父元素（li 元素）并设置样式颜色：

for (var i = 0; i < document.UmfrageForm.frage10.length; i++) {
    var radioElm = document.UmfrageForm.frage10[i].parentNode;
    radioElm.style.backgroundColor = "gray";
    radioElm.style.color = "black";
}

如果您总是希望单选按钮具有某种颜色，我建议修改“单选按钮”和“名称”的 CSS 类

于 2013-04-17T22:28:14.897 回答