如何获得css缩放级别

JavaScript - How to get css zoom level?

本文关键字：缩放 css 何获得      更新时间：2023-09-26

一个简单的问题我想使用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>

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

result is: zoom: 0.1;

有一个特殊的值来获得当前css缩放级别?

可能是因为在你的CSS文件中，元素的属性zoom没有设置，所以JS找不到一个值来放入"altzoom"。试着把它放到你的CSS声明中。

您无法获得样式表的缩放级别。有一种方法，但会让事情变得过于复杂。我建议直接在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; 
}
相关文章：