二、参考第16章demo03-1.html,使用键盘上的加号(+)和减号(-)来调整resizable.html中的 div 元素的大小,但最小尺寸只能为50px。使用JavaScript
时间: 2025-01-06 07:49:08 浏览: 1
要使用键盘上的加号(+)和减号(-)来调整网页中 div 元素的大小,并确保其最小尺寸为50px,可以使用JavaScript来监听键盘事件并修改 div 的样式。以下是一个示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Div</title>
<style>
#resizable {
width: 200px;
height: 200px;
background-color: lightblue;
resize: both;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id="resizable">Resize Me!</div>
<script>
const resizable = document.getElementById('resizable');
const minSize = 50; // 最小尺寸
document.addEventListener('keydown', function(event) {
let width = parseInt(resizable.style.width, 10);
let height = parseInt(resizable.style.height, 10);
if (isNaN(width)) width = 200; // 默认宽度
if (isNaN(height)) height = 200; // 默认高度
if (event.key === '+') {
width += 10;
height += 10;
} else if (event.key === '-') {
width -= 10;
height -= 10;
}
if (width < minSize) width = minSize;
if (height < minSize) height = minSize;
resizable.style.width = width + 'px';
resizable.style.height = height + 'px';
});
</script>
</body>
</html>
```
在这个示例中,我们首先定义了一个 div 元素,并设置了一些基本样式。然后,我们使用 JavaScript 监听键盘事件:
1. 获取 div 元素和最小尺寸。
2. 监听键盘事件,当按下加号(+)时,增加 div 的宽度和高度;当按下减号(-)时,减少 div 的宽度和高度。
3. 确保 div 的尺寸不会小于最小尺寸。
这样,用户就可以使用键盘上的加号和减号来调整 div 元素的大小,并且其最小尺寸被限制为50px。
阅读全文