<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 600px;
margin: 30px auto;
border: 3px solid #000;
position: relative;
}
.box>span {
font-size: 30px;
font-weight: 900;
}
.box>button {
padding: 10px 20px;
background: red;
color: #fff;
}
.inner {
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 20px;
}
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
display: none;
}
.mask>div {
width: 400px;
height: 200px;
position: absolute;
right: 30px;
bottom: 50px;
border: 3px solid blue;
background: #fff;
}
.mask>div>button {
width: 60px;
height: 30px;
}
</style>
</head>
<body>
<div class="box">
<span>请为下面的div设定样式:</span> <button>点击设置</button>
<!-- 遮盖层 -->
<div class="mask">
<div>
选择背景颜色: <button name="setColor">红</button> <button name="setColor">黄</button> <button
name="setColor">蓝</button><br>
选择宽度 PX: <button name="setWidth">200</button> <button name="setWidth">300</button> <button
name="setWidth">400</button><br>
选择高度 PX: <button name="setHeight">200</button> <button name="setHeight">300</button> <button
name="setHeight">400</button><br>
<button name="reset">恢复</button> <button name="ok">确定</button>
</div>
</div>
<!-- 设定的div -->
<div class="inner"></div>
</div>
<script>
// 先获取 整个div
var oBox = document.querySelector('.box');
// 获取 box,div中span标签
// 在 oBox 这个标签对象中 查找 span标签
var oSpan = oBox.querySelector('span');
// 获取 button按钮
var oBtnSet = document.querySelector('.box>button');
// 获取 遮盖层div标签
var oMask = document.querySelector('.mask');
// 获取 设定div标签
var oInner = document.querySelector('.inner');
// 点击设置 显示 遮盖层div
oBtnSet.addEventListener('click', function () {
oMask.style.display = 'block';
})
// 设定一个数组,存储要设定的颜色
var colorArr = ['red', 'yellow', 'blue'];
// 获取 三个 设定颜色的button按钮
var oBtnSetColors = document.querySelectorAll('[name="setColor"]');
console.log(oBtnSetColors);
// 循环遍历伪数组
oBtnSetColors.forEach(function (item, key) {
// item 是 button标签
// 颜色数组 和 标签伪数组 单元个数相同 索引下标一一对应
// 也就是 标签伪数组的索引下标 可以 从 颜色数组中 获取对应的颜色
item.style.background = colorArr[key];
// 给 每一个 item 也就是 button标签 设定点击事件
item.addEventListener('click', function () {
// console.log( key );
// 给 div 标签 设定 索引下标 对应的 颜色数组的数据
oInner.style.background = colorArr[key];
})
})
// 获取 三个 设定宽度的button按钮
var oBtnSetWidths = document.querySelectorAll('[name="setWidth"]');
oBtnSetWidths.forEach(function (item, key) {
item.addEventListener('click', function () {
oInner.style.width = `${(key+2)*100}px`;
})
})
// 获取 三个 设定宽度的button按钮
var oBtnSetHeights = document.querySelectorAll('[name="setHeight"]');
oBtnSetHeights.forEach(function (item, key) {
item.addEventListener('click', function () {
oInner.style.height = `${(key+2)*100}px`;
})
})
// 恢复button
var oBtnReset = document.querySelector('[name="reset"]');
oBtnReset.addEventListener('click', function () {
oInner.style.width = '100px';
oInner.style.height = '100px';
oInner.style.background = 'transparent';
})
// 确定button
var oBtnOk = document.querySelector('[name="ok"]');
oBtnOk.addEventListener('click', function () {
oMask.style.display = 'none';
})
</script>
</body>
</html>
[js] 小案例---标签选择练习
最新推荐文章于 2024-02-20 19:09:27 发布
该博客展示了一个交互式的网页示例,用户可以通过点击按钮动态设定div的背景颜色、宽度和高度。提供了红色、黄色和蓝色作为背景色选项,以及200px、300px和400px作为宽度和高度的选择。此外,还包含恢复原始设置和确认修改的功能,实现了简单的前端界面交互功能。
摘要由CSDN通过智能技术生成