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

Question

好吧，我想做点什么，但我显然做错了。

我在JS中有这个功能：

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

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

我认为错误如下：

未定义TypeError:无法读取未定义属性的“添加”

我试图做的是，得到所有元素的类名模糊，并添加另一个类名(模糊)到它.但是这不起作用，因为我的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");
    }
}