Question

好的，我正在尝试做点什么，但我显然做错了。

我在JS中有这个功能：

function onFocus() {
      document.getElementsByClassName('blur').classList.add("blurry");
    }

    function onFocusOut() {
      document.getElementsByClassName('blur').classList.remove("blurry");
    }

错误I ge，如下：

未捕获的TypeError：无法读取未定义的属性“add”

我尝试做的是获取所有带有类名 blur 的元素，并为其添加另一个类名（模糊） ...但这不起作用，因为我的CSS没有被更改。

我唯一想要实现的，就是在点击/聚焦输入字段时为具有该类名的元素添加不透明度，并在有人点击输入字段之外时将其删除。

.blurry {
  opacity: 0.4
}

PS：最初，我开始使用id's代替classes，但这意味着我只能在一个HTML元素上使用此功能。这就是我决定改用类名的原因。

Answer 1

要保持您想要的格式，您只需添加for循环即可遍历所有类名为“blur”的元素。

我添加了一个在您的案例中实现for循环的方法示例：

function onFocus() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.add("blurry");
    }
}

function onFocusOut() {
    var blurElements = document.getElementsByClassName('blur');
    for (var i = 0, l = blurElements.length; i < l; i++) {
        blurElements[i].classList.remove("blurry");
    }
}

为什么我不能获得所有元素并为它们添加一个类？

1 个答案: