Question

一个简单的问题。我想使用CSS缩放级别调整我的网站oncklick。

我想从＆＃34; html＆＃34;中抓住css zoom。元件。

CSS

html{zoom:1}

的JavaScript

function zoomIn(){
altzoom = document.documentElement.style.zoom;
zoomIn = (altzoom + 0.1);
document.documentElement.style.zoom = zoomIn; 
}

HTML

<button onclick= "zoomIn()">Zoom +</button>

如果我点击＆＃34;缩放+＆＃34;我只获得0.1的缩放级别，所以我认为我没有从document.documentElement.style.zoom获得输出;

结果是：zoom：0.1;

有一个特殊的值来获取当前的css zoom lvl？

我很乐意解决它。

Answer 1

也许是因为在你的CSS文件中，没有设置元素的属性zoom，所以JS找不到要放入“altzoom”的值。尝试将其放入CSS声明中。

Answer 2

您无法获得样式表的缩放级别。那么有一种方法，但这会使事情变得过于复杂。我建议直接在javascript中设置它：

document.documentElement.style.zoom = 1;

见下文，不要忘记parseFloat，因为它确保正确添加0.1。如果您想控制后端代码中的值（如果有），您还可以在属性或隐藏字段上设置/获取此值。

关闭主题：不要将函数中的变量设置为全局变量。它现在没有坏处，但在全局范围内将zoomIn也作为函数名称也是不好的做法。

function zoomIn(){
    var altzoom = parseFloat(document.documentElement.style.zoom);
    var zoomIn = altzoom + 0.1;
    document.documentElement.style.zoom = zoomIn; 
}

JavaScript - 如何获得css缩放级别？

2 个答案: