如何创建美观且消失的HTML按钮
<!DOCTYPE html>
<html>
<head>
<title>如何创建美观且消失的HTML按钮</title>
<style>
/* 设置按钮的样式 */
.myButton {
background-color: #4CAF50; /* 绿色背景 */
border: none; /* 去掉边框 */
color: white; /* 字体颜色为白色 */
padding: 15px 32px; /* 设置内边距 */
text-align: center; /* 水平居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 显示为行内块元素 */
font-size: 16px; /* 字体大小为16px */
margin: 10px; /* 按钮之间的距离 */
cursor: pointer; /* 鼠标移上去变成手型 */
}
</style>
</head>
<body>
<button class='myButton' onclick='disappear()'>点击我</button>
<p id='message'></p>
<script>
function disappear() {
document.querySelector('.myButton').style.display = 'none'; // 隐藏按钮
document.querySelector('#message').innerHTML = '我'; // 在p元素中显示文字
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nni3 著作权归作者所有。请勿转载和采集!