Question

我在JavaScript中编写了一个简单的脚本，允许我在我的网站上更改特定div（类）的字体大小，但它不会改变它，我无法弄清楚为什么...... < / p>

<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

为什么？

Answer 1

getElementsByClassName("box2-li");为 提供了一系列元素 ，而不是单个元素，因此您无法更改x.

等字体

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

Answer 2

你将有一个集合，＆＃34;数组＆＃34;或变量中的元素＆＃39; x＆＃39;。

您需要一个for循环，例如：

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

Answer 3

你必须在你定义'box2-li'的块中查看你'css'文件并创建fontSize变量，我认为这将解决你的问题

Answer 4

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

以上概念也可以使用，结果是你不使用在线css。这是一种最佳做法。

Answer 5

我遇到了同样的问题，建议您使用x[0].style.fontSize="20px";而不是x.style.fontSize="20px";

因为Document.getElementsByClassName（）返回匹配元素的列表，而不是元素本身。因此您不得不选择第一个作为目标。

MDN: Get the first element whose class is 'test'

为什么不改变字体大小？

5 个答案: