为什么它不能改变字体大小？

Question

我用JavaScript编写了一个简单的脚本，可以让我在网站上更改特定div（类）的字体大小，但它没有更改，而我又想不出原因...

<script> //it gets the classname and set it font style to 20px
    function resizeText() {
        var x = document.getElementsByClassName("box2-li");
        x.style.fontSize="20px";
    };
</script>

当我按下按钮时，我会得到以下错误：

Uncaught TypeError: Cannot set property 'fontSize' of undefined

为什么会这样呢？

- Alexandru Ianas

---

使用 document.getElementsByClassName，您可以获取具有相同类名的多个元素，并尝试为所有元素设置它。 - user3497034

Answer 1

getElementsByClassName("box2-li"); 返回的是一组元素而不是单个元素，因此您不能像x.那样更改字体。

这个集合类似于数组，可以像x[0].style.fontSize="20px";这样访问，或者您可以使用foreach来迭代每个元素。

- Tushar

Answer 2

您将拥有一个集合，即变量'x'中的"数组(Array)"或元素。

您需要使用如下的for循环：

function resizeText() {
    var x = document.getElementsByClassName("box2-li");
    for (var i = 0; i < x.length; i++) {
        x[i].style.fontSize="20px";
    }
};

- Louis

---

非常感谢，它像魔法一样奏效了。在 CSS 文件中字体大小保持不变，但在刷新页面后会发生变化，这很棒，因为我不想永久修改它。 - Alexandru Ianas

Answer 3

我遇到了同样的问题，建议您使用x[0].style.fontSize="20px";代替x.style.fontSize="20px"; 因为Document.getElementsByClassName()返回匹配元素的列表，而不是元素本身。所以你需要选择第一个作为目标。 MDN: 获取class为“test”的第一个元素

- Hooey Pooey

Answer 4

你需要查看你的css文件中定义'box2-li'的代码块，并创建一个fontSize变量，我认为这样可以解决你的问题。

- Jose Luis Crisostomo

Answer 5

x.className = "class-name-which-already-font-size-defined"

上述概念也可以使用，结果是您不使用内联CSS。这是最佳实践。

- Sameera Thilakasiri