javascript - 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)，它接受一个指针“this”并与表单集的不同组件一起使用。

obj.form.info ...如何将子类从“可用”切换到“完整”，反之亦然？我怎样才能得到它的当前值？

标签： javascriptcss

Answer 1

使用 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');
    }
}