Question

您可以编写类似

的内容

function changeHeight() {
    document.getElementById('chartdiv').style.height = "200px"
}
<button type="button" onClick="changeHeight();"> Click Me!</button>

但是如果你有一个具有相同id和按钮的第二个div，当按下第二个按钮时它仍会改变第一个元素的高度。是否可以编写一个可以应用于所有元素的更通用的方法？

Answer 1

首先，ID应该是唯一的。 永远不要有多个具有相同ID的元素。

如果您需要更改许多不同的元素，请将参数传递给您的函数：

function changeHeight(selector, height) {
    let element = document.querySelector(selector);
    if (element) {
        element.style.height = height;
    }
}

changeHeight('#chartdiv', '200px');
changeHeight('#otherElement', '500px');

Answer 2

id应该是唯一的，因为它是元素的唯一标识符。您可以拥有多个具有相同类名的元素。在这种情况下，您可以使用

document.getElementsByClassName("class_name")[0].style.height = "200px";

document.getElementsByClassName（“class_name”）为您提供了一个按时间顺序排列该类名的所有元素的数组，即访问该类首次出现的元素，您必须使用第0个元素。

注意：永远不要重复使用ID。

如何编写一般改变高度的javascript函数

2 个答案: