手动设置div的放大缩小

最新推荐文章于 2025-02-11 15:04:49 发布

super_XYQ

最新推荐文章于 2025-02-11 15:04:49 发布

阅读量3.4k

点赞数

分类专栏： JavaScript 前端文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/super_XYQ/article/details/122202233

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript获取元素并操作其style属性实现div的放大和缩小功能。通过设置zoom属性，允许在10%到130%的范围内动态调整元素的缩放比例，为网页交互提供了便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过按钮设置div的缩放：
放大：
const obj = document.getElementById('tableMain');
// 一开始默认是100%
let zoom = parseInt(obj.style.zoom, 10) || 100;
// 设定范围
if (zoom >= 10 && zoom <= 130) {
    obj.style.zoom = zoom + 10 +'%';
}

缩小：

const obj = document.getElementById('tableMain');
// 一开始默认是100%
let zoom = parseInt(obj.style.zoom, 10) || 100;
// 滚轮滚一下wheelDelta的值增加或减少120
if (zoom >= 10 && zoom <= 130) {
    obj.style.zoom = zoom + 10 +'%';
}