我用js做了一个onclick，它在红色和绿色之间切换文本区域文本的颜色。（开始为红色）为什么onclick在第二次点击后开始工作但不是马上开始工作的任何想法？function todocheckdone(){ var el = document.getElementById("task1"); if (el.style.color === "red"){ el.style.color = "green"; } else{ el.style.color = "red";}}#todosnumbering{ font-size: 18px; top: 18px; left: 10px; position: absolute;}#task1{ font-size: 18px; text-align: left; color: red; font-size: 18px; width: 358px; height: 40px; top: 16px; left: 30px; position: absolute; background: white; }#todocheck1{ top: 20px; left: 406px; position: absolute;}<html><body><button type="button" id="todocheck1" onclick="todocheckdone()">✓</button><div id="todosnumbering">1.</div><textarea id="task1">THIS TEXT TOGGLES BETWEEN GREEN AND RED</textarea></body></html>
1 回答
牧羊人nacy
TA贡献1862条经验 获得超7个赞
检查.style.someProp元素的 只会为您提供直接分配给该元素的样式属性。由于该元素最初没有color直接分配给它的属性，因此.style.color在函数第一次运行时访问会为您提供空字符串。
我不会直接设置样式，而是切换一个类：
function todocheckdone() {
var el = document.getElementById("task1");
el.classList.toggle('green');
}
#todosnumbering {
font-size: 18px;
top: 18px;
left: 10px;
position: absolute;
}
#task1 {
font-size: 18px;
text-align: left;
color: red;
font-size: 18px;
width: 358px;
height: 40px;
top: 16px;
left: 30px;
position: absolute;
background: white;
}
#task1.green {
color: green;
}
#todocheck1 {
top: 20px;
left: 406px;
position: absolute;
}
<button type="button" id="todocheck1" onclick="todocheckdone()">✓</button>
<div id="todosnumbering">1.</div>
<textarea id="task1">THIS TEXT TOGGLES BETWEEN GREEN AND RED</textarea>
添加回答
举报
0/150
提交
取消