Javascript使按钮对元素执行多个操作
例如，我现在有一些按钮可以调整盒子的高度、颜色和不透明度-Javascript使按钮对元素执行多个操作,javascript,html,button,action,Javascript,Html,Button,Action,例如，我现在有一些按钮可以调整盒子的高度、颜色和不透明度- document.getelementbyID("growbutton").addEventlistener("click", function growFunction() { document.getelementbyID("box").style.height = "300px" }); document.getelementbyID("
document.getelementbyID("growbutton").addEventlistener("click", function growFunction() {
document.getelementbyID("box").style.height = "300px"
});
document.getelementbyID("bluebutton").addEventlistener("click", function blueFunction() {
document.getelementbyID("box").style.color = "#0000FF"
});
document.getelementbyID("resetbutton").addEventlistener("click", function resetFunction() {
document.getelementbyID("box").style.height = "150px"
});
document.getelementbyID("resetbutton").addEventlistener("click", function resetFunction() {
document.getelementbyID("box").style.color = "#FFA500"
});
但是，执行时，“框”仅在高度上重置，而不在颜色上重置。任何帮助都将不胜感激。您不需要为每个函数发送单个操作。您可以创建一个函数
resetFunctionaddEventListenerfunction resetFunction(){
let box = document.getElementById("box");
box.style.height = "150px";
box.style.color = "#FFA500";
}
document.getElementById("resetbutton").addEventlistener("click", resetFunction);
这是最好的方法，但可能将第二个函数的名称更改为
resetFunction2<head>
<script>
var defaults = {}
function setDefaults() {
defaults.box = {
height: document.getElementByID("box").style.height,
color: document.getElementByID("box").style.color
}
// I tucked these functions in here since they need to fire after the page loads
document.getElementByID("resetbutton").addEventListener("click", function resetFunction() {
document.getElementByID("box").style.height = defaults.box.height
document.getElementByID("box").style.color = defaults.box.color
});
}
</head>
<body onload='setDefaults()'>
...
变量默认值={}
函数setDefaults（）{
默认值.box={
高度：document.getElementByID（“box”）.style.height，
颜色：document.getElementByID（“框”）.style.color
}
//我把这些函数放在这里，因为它们需要在页面加载后启动
document.getElementByID（“resetbutton”）.addEventListener（“单击”，函数resetFunction（））{
document.getElementByID（“box”）.style.height=defaults.box.height
document.getElementByID（“box”）.style.color=defaults.box.color
});
}
...
getelementbyIDgetelementbyIDctrl+cgetElementByIdaddEventListener#box