点击按钮时显示或隐藏一个div元素:
HTML代码:
<button id="toggleButton">点击切换显示</button>
<div id="content" style="display: none;">
这是要显示或隐藏的内容。
</div>
JavaScript代码:
const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');
toggleButton.addEventListener('click', () => {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
这段代码首先通过getElementById
方法获取按钮和内容的元素,并将其分别保存在toggleButton
和content
变量中。然后,使用addEventListener
方法为按钮绑定一个点击事件的监听器。
在监听器函数中,通过检查内容元素的display
样式属性,如果其值为none
,则将其设置为block
以显示元素;如果不是none
,则将其设置为none
以隐藏元素。这样,每次点击按钮时,就会切换内容元素的显示和隐藏状态。