按钮（Button）学习笔记
按钮是用于在用户界面中触发动作的控件。在许多应用程序和网站中，按钮是一个非常常见的元素。本文将介绍按钮的基本用法和实例。
基本用法
按钮可以使用 HTML 标签 <button> 来创建。
htmlCopy Code<button>点击我</button>
使用 CSS 可以为按钮添加样式。
cssCopy Codebutton {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
实例
1. 改变背景颜色
下面的按钮用于改变页面的背景颜色。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
button {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>按钮实例 - 改变背景颜色</h2>
<button onclick="document.body.style.backgroundColor = 'lightgreen'">绿色</button>
<button onclick="document.body.style.backgroundColor = 'lightblue'">蓝色</button>
<button onclick="document.body.style.backgroundColor = 'lightyellow'">黄色</button>
</body>
</html>
点击不同颜色的按钮可以改变页面的背景颜色。
2. 显示隐藏元素
下面的按钮用于显示或隐藏一个元素。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<h2>按钮实例 - 显示隐藏元素</h2>
<button onclick="myFunction()">点击我</button>
<div id="myDIV">
<h1>显示和隐藏元素</h1>
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
点击按钮会显示或隐藏一个元素。
总结
本文介绍了按钮的基本用法和实例。使用按钮可以为用户提供更好的交互体验。