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; 
}