JS:如何切换对象的CSS子类

Question

我想根据任何事件从JS函数更改对象的视图。

例如，我有一组表单，包括一个文本类型的输入表单。当它没有完全填充时，框架和字体的颜色是绿色的，当它完全填充时是红色的。

同时，我想保持HTML设计者的自由，让他有机会任意设置类名。我想在子类级别进行操作。

我设置了这个：

.info.available {
color: green;
border: 1px solid lime;
}
.info.full {
color: red;
border: 1px solid red;
}

和

<input class="info available" type="text" id="info">

我有一个函数myfunc(obj(；这个"；并且与表单集的不同组件一起工作。

obj.form.info…如何将子类从"；可用"；至"；"满"；反之亦然？如何获取其当前值

Answer 1

首先，指定一个输入maxlength，以了解其是否已完全填充。

<input class="info available" max-length="10" type="text" id="input">

然后在点击或键入时从输入字段中删除轮廓颜色

input.available {
border: 1px solid green;
}
input.full {
border: 1px solid red;
}
input:focus {
outline: none;
}

这是为了使CCD_ 1和CCD_。然后在输入字段中添加一个操作事件，该事件将侦听键入的每个字符串。你可以通过：

接下来，在脚本标记中，创建将从输入字段中激发的函数

<script>
function myfunc(e) {
let x = document.getElementById('input')
if (x.value.length == 10)
{
x.classList.remove('available')
x.classList.add('full')
}
else {
x.classList.add('available')
x.classList.remove('full')
}
}
</script>

x refers到您的输入字段x.value.length是指输入字段中的字符长度

如果x.value.length等于输入的最大长度(我们指定为10(，它将用.full替换类.available，反之亦然

您可以在此处阅读文档或教程：
https://www.w3schools.com/js/js_events.asp
https://www.w3schools.com/tags/ref_eventattributes.asp

Answer 2

使用maxlength="{maxlen}"；以供您输入。

function myfunc(obj) {
if (obj.value.length >= maxlen) {
obj.classList.remove('available');
obj.classList.add('full');
} else {
obj.classList.add('available');
obj.classList.remove('full');
}
}