需要帮助在javascript中添加类

Need help in javascript to add class

本文关键字：添加 javascript 帮助      更新时间：2023-09-26

这是我的代码:

<form>
<input type="text" id="username" onblur="class();" name="username">
</form>
<script>
    function class() {
        var username = document.getElementById('username');
        if (username == "") {
            //Now here I want to add a class
        }
    }
</script>

现在我想添加类时，用户名值没有给出。我该怎么做呢?

您的代码的主要问题是:

  • 您正在使用class，其中标识符是预期的，但您不能使用class作为标识符，因为它是保留字。

  • 您将获得元素 username字段，而不是它的值。

听起来您想要在blur事件上添加一个类，以失去焦点的元素。如果是这样，只需对代码做最小的修改，就可以:

  1. 使用不同的函数名，因为function class() { ... }无效，class是保留字

  2. 在onblur中传递this到你的函数

  3. 为你的函数声明一个elm参数(任何你想要的名字)

  4. 将类添加到elm.classList(在现代浏览器上)或element.className(以获得最大的兼容性)

的例子:

function checkUserName(elm) {
  var username = elm.value; // Or ... this.value.trim();
  if (!username) {
    elm.className += " no-name";
  } else {
    elm.className = elm.className.replace(/'bno-name'b/, '');
  }
}
.no-name {
  background-color: yellow;
  border: 1px solid red;
}
<form>
  <input type="text" id="username" onblur="checkUserName(this);" name="username">
</form>

话虽如此，我根本不会使用老式的onxyz属性。相反，我将使用现代事件处理:

document.getElementById("username").addEventListener("blur", function(e) {
  var username = this.value; // Or ... this.value.trim();
  if (!username) {
    this.className += " no-name";
  } else {
    this.className = this.className.replace(/'bno-name'b/, '');
  }
}, false);
.no-name {
  background-color: yellow;
  border: 1px solid red;
}
<form>
  <input type="text" id="username" onblur="checkUserName(this);" name="username">
</form>

var username = document.getElementById('username').value
if (username == "") {
    document.getElementById('username').className += " someClass";
}
相关文章：