我们基本上在表中具有以下用于单选按钮的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>

我们希望在不使文本不可见的情况下使行变灰,我们在Google上进行了很多搜索,但找不到解决方案。 这是我们使用的:

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

它将所有行(包括文本)显示为灰色。 我们希望在将行设置为灰色后文本仍然可见。 我们该怎么做?

灾难截图:

在此处输入图片说明

===============>>#1 票数:1 已采纳

根据您的jsfiddle:您的样式表将span标签放置在输入标签的后面,这就是为什么在删除输入透明性后看不到span的原因。

您需要做的是将背景色应用于span标签,而不是输入标签。

[更新]如评论中的@alicelieutier所述,如果您只需要支持最新的浏览器,则还可以选择将半透明背景应用于输入:

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

===============>>#2 票数:0

不知道是否可能,但是您可以向每个lispan元素添加id属性。

假设您提供以下ID: frage10_opt1frage10_opt2frage10_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";
}

===============>>#3 票数:0

我有点困惑。 您是要在特定事件触发时“灰显”行,还是希望它们始终被“灰显”?

我认为Michal代码的问题在于,您正在为表单的radio元素运行循环,并且您的文本位于该元素之前的span标记中。 您可以尝试获取单选元素的父元素(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类“单选按钮”和“名称”

  ask by HitomiTenshi translate from so

未解决问题?本站智能推荐: