极客教程用纯CSS设计一个关闭按钮
我们的任务是使用纯CSS制作关闭按钮。有两种方法，将在下面讨论。
方法1：创建一个 <div>内的另一个 <div>其中有字母’X’，有助于显示关闭按钮。当 “点击 “事件发生在’X’上，然后执行操作。在这个例子中，外部的 <div>事件发生时已被隐藏。
例子：这个例子实现了上述方法。
<!DOCTYPE HTML>
<html>
<head>
<style>
.outer {
background: green;
height: 60px;
display: block;
}
.button {
margin-left: 93%;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p>
Click on the cross to
hide the element.
</p>
<div class="outer">
<div class="button">X</div>
</div>
<br>
<p id="GFG"></p>
<script>
var down = document.getElementById("GFG");
var el = document.querySelector('.button');
el.addEventListener('click', function () {
var el2 = document.querySelector('.outer');
el2.style.display = "none";
});
</script>
</body>
</html>
输出:
方法2：在这个方法中使用了jQuery。创建一个 <div>内的另一个 <div>含有字母 “X “的 “X “显示关闭按钮。当 “点击 “事件发生在’X’上，然后执行操作。在这个例子中，外 <div>事件发生时已被隐藏。
例子：这个例子实现了上述方法。
<!DOCTYPE HTML>
<html>
<head>
<style>
.outer {
background: green;
height: 60px;
display: block;
}
.button {
margin-left: 93%;
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1>
GeeksForGeeks
</h1>
<p>
Click on the cross to
hide the element.
</p>
<div class="outer">
<div class="button">X</div>
</div>
<br>
<p id="GFG">
</p>
<script>
var down = document.getElementById("GFG");
('.button').on('click', function () {
('.outer').hide();
});
</script>
</body>
</html>
输出:
