首頁猿問使用JS函數更改更少的CSS值

使用JS函數更改更少的CSS值

JavaScript

慕哥6287543 2022-09-02 10:29:04

我想用函數修改div的無單位縮放值。我知道我可以用一堆其他的if語句來做到這一點，但我想要很多縮放級別，所以我寧愿讓函數看起來如果div處于完全縮放狀態，如果不是，那么縮放值加倍。使用下面的函數，我試圖從當前縮放值設置一個變量，將其更改為整數，如果整數為8，則保持縮放為8，如果整數是其他任何東西，則將該數字加倍，然后轉換回字符串并設置為縮放值。<script> function zoomIn() { var zoomNow = (document.getElementById('mainVP').style.zoom); zoomNow = Number(zoomNow); if (zoomNow == 8) { document.getElementById('mainVP').style.zoom = 8; } else { zoomNow = zoomNow*2; toString(zoomNow); document.getElementById('mainVP').style.zoom = zoomNow; }}</script>

查看完整描述

2 回答

森林海

TA貢獻2011條經驗獲得超2個贊

這應該給你你正在尋找的東西：

function zoomIn(el)

{

// Current zoom level as a number

const zLevel = +(el.style.zoom);

// If current zoom level is equal or grater than 8 then set it to 8

// otherwise double it

el.style.zoom = (zLevel >= 8) ? 8 : (zLevel * 2);

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

查看該鏈接以了解有關“？（三元）“運算符。

你可以這樣使用它：

或

// Zoomable element

const zoomable = document.getElementById('mainVP');

// Zoom button: this can be the zoomable element itself or any other element

document.getElementById('zoomIn').onclick = e => {

zoomIn(zoomable);

};

反對回復 2022-09-02

有只小跳蛙

TA貢獻1824條經驗獲得超8個贊

NASA的答案似乎比我最終的解決方案要簡潔得多，我現在知道了三元算子。但我只是不知道如何使用代碼的“可縮放元素”或“縮放按鈕”部分。一旦我知識多一點，我會重新審視這一點。我現在回到了我原來的技術，經過一些調試后，我意識到getElementById返回0。所以我用getComputedStyle代替了：

function zoomIn() {

var elem = document.getElementById("mainVP");

var zoomNow =

window.getComputedStyle(

elem, null).getPropertyValue("zoom");

if (zoomNow == 8) {

document.getElementById('mainVP').style.zoom = 8;

} else {

zoomNow = zoomNow*2;

document.getElementById('mainVP').style.zoom = zoomNow;

}

反對回復 2022-09-02

2 回答
0 關注
108 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用JS函數更改更少的CSS值

使用JS函數更改更少的CSS值

2 回答

添加回答