JavaScript-如何获取CSS缩放级别？

Question

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

我想从“ html”元素中获取css缩放。

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>

如果我单击“ zoom +”，则只能获得0.1的缩放级别，因此我认为我没有从document.documentElement.style.zoom获得输出；

结果是：缩放：0.1；

有一个特殊的值来获取当前的CSS缩放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; 
}