📅  最后修改于: 2023-12-03 15:01:42.472000             🧑  作者: Mango
使用 JavaScript 可以轻松创建屏幕按钮,而本文就来介绍如何用 10 行代码创建一个屏幕按钮!
1. 创建一个按钮元素,设置 id 为“myBtn”
2. 获取该按钮元素
3. 为按钮元素添加样式,设置按钮的背景颜色、宽度和高度
4. 为按钮元素添加文本
5. 创建一个容器元素,设置 id 为“myContainer”
6. 获取该容器元素
7. 将按钮添加到容器中
8. 将容器添加到 body 元素中
9. 为按钮元素添加点击事件
10. 在点击事件中添加自定义函数
// HTML 代码
<button id="myBtn"></button>
// JavaScript 代码
let myBtn = document.getElementById("myBtn");
myBtn.style.backgroundColor = "red";
myBtn.style.width = "100px";
myBtn.style.height = "50px";
myBtn.textContent = "Click me";
let myContainer = document.createElement("div");
myContainer.id = "myContainer";
myContainer.appendChild(myBtn);
document.body.appendChild(myContainer);
myBtn.addEventListener("click", myFunction);
function myFunction() {
alert("Hello, World!");
}
以上就是用 10 行代码创建屏幕按钮的方法,你只需复制以上代码,修改样式和自定义函数即可快速创建自己所需的按钮。