<分区>
标签 javascript html css
<分区>
我在绝对位置的 div 中有两个输入框。以及那些输入框上的标签。我想要的效果是当我聚焦一个输入框时，标签应该是蓝色，当模糊时应该删除类(蓝色)。同时还有其他标签和输入框。
// Initial color of label
label.labels{
color: black;
}
input.box{
border-width: 0 0 2px 0;
outline: none;
}<div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
<label class = "labels">First Name:</label>
<input type = "text" class = "box" /><br />
<label class = "labels">Last Name:</label>
<input type = "text" class = "box" />
</div>当我聚焦 input.box 时，label.labels 的颜色应该是蓝色。是的，输入和标签都具有相同的类别。如何使用纯 Javascript 实现这种效果？或者，如果可能，请告诉我如何使用 css 实现此目的？
最佳答案
这是一个使用纯 Javascript 的解决方案:
function toggleClass() {
this.previousElementSibling.classList.toggle('imblue');
}
var inputs = document.getElementsByClassName('box');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('focus', toggleClass);
input.addEventListener('blur', toggleClass);
}label.labels {
color: black;
}
input.box {
border-width: 0 0 2px 0;
outline: none;
}
.imblue {
color: blue !important;
}<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
<label class="labels">First Name:</label>
<input type="text" class="box" /><br />
<label class="labels">Last Name:</label>
<input type="text" class="box" />
</div>关于javascript - 如何在纯 javascript 中更改输入焦点上的标签颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46733501/
相关文章：
javascript - 需要 javascript 代码在一个页面中运行多次。对于每个分区
css - 旧的在 div 问题中居中图像(图像大小可变 - div 大小固定)
javascript - Angular 5 : setting (click) value from an object not working
javascript - 通过发送 POST 参数在 Ext JS 4 中显示 PDF
javascript - bootstrap-datepicker.js 和 jquery.maskedinput.js 玩得不好
html - Bootstrap 控件根据屏幕宽度更改位置高度