要求:每次点击放大/缩小 2个像素字号,最大到32,最小到12 --> <div> <button class="jia">+</button> <button class="jian">-</button> </div>
时间: 2023-11-16 17:51:57 浏览: 25
可以为您提供以下代码来实现这个功能:
```html
<div>
<button class="jia">+</button>
<button class="jian">-</button>
</div>
<script>
const fontSizeElement = document.querySelector('body');
let currentFontSize = 16; // 默认字体大小为16像素
const jiaButton = document.querySelector('.jia');
jiaButton.addEventListener('click', () => {
if (currentFontSize < 32) {
currentFontSize += 2;
fontSizeElement.style.fontSize = `${currentFontSize}px`;
}
});
const jianButton = document.querySelector('.jian');
jianButton.addEventListener('click', () => {
if (currentFontSize > 12) {
currentFontSize -= 2;
fontSizeElement.style.fontSize = `${currentFontSize}px`;
}
});
</script>
```
将上述代码放置在您的 HTML 文件中,它会为页面上的 "+" 和 "-" 按钮添加点击事件监听器。每次点击 "+" 按钮时,字体大小将增加2像素(最大到32像素)。每次点击 "-" 按钮时,字体大小将减少2像素(最小到12像素)。
请将代码复制到您的项目中,并根据需要进行调整。希望对您有帮助!