我正在尝试选择单选按钮时更改p1的文本颜色。如果选择向上,则为绿色;如果选择向上,则为红色。我可以使用CSS更改单选框的颜色,而不会出现任何问题,但是我无法更改文本。
<form>
<p1>Test1: </p1>
<input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked> Up
<input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"> Down
<input type="radio" id="route" style="vertical-align: middle" name="test1" value="en route"> En route
<input type="radio" id="house" style="vertical-align: middle" name="test1" value="In-House"> In-House
<b> Notes: </b><br>
</form>
答案 0 :(得分:2)
欢迎堆栈溢出!
要在JavaScript中设置元素的颜色,只需访问该元素,然后访问样式对象,然后设置颜色值。像这样
<p id="changeMe">Text will change to green :)</p>
<script>
// Using ES5 (Ecma-Script 2015) for compatibility sake
var elementToChange = document.querySelector("#changeMe")
elementToChange.style.color = "green"
</script>
您可以检测是否在JavaScript中选中了这样的复选框
<input type="checkbox" id="check">
<h1 style="color: red;" id="res">Checked?</h1>
<button onclick="isChecked()">Check If Checked</button>
<script>
function isChecked() {
var element = document.querySelector("#check")
var res = document.querySelector("#res")
if(element.checked) {
res.style.color = "green"
}
else {
res.style.color = "red"
}
}
</script>
由于我们不喜欢在Stack Overflow上加注,因此我将把2和2放在一起。祝你有美好的一天!
答案 1 :(得分:0)
如果您正在寻找纯CSS解决方案,因为您没有将其标记为js问题,那么您也可以这样做,但是您必须对HTML进行一些调整。您可以添加任意数量的无线电输入,只要p元素位于它们之后,该输入就仍然可以使用。
<form>
<input type="radio" id="up" style="vertical-align: middle" name="test1" value="Up" checked><label for="up"> Up</label>
<input type="radio" id="down" style="vertical-align: middle" name="test1" value="Down"><label for="down"> Down</label>
<p class="color-me">Test1: </p>
</form>
form {
display: flex;
flex-direction: row;
}
.color-me {
order: 1;
}
#up, #up ~ label, #down, #down ~ label {
order: 2;
}
#up:checked ~ .color-me{
background-color: tomato;
}
#down:checked ~ .color-me{
background-color: steelblue;
}