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

Question

我想用函数修改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>

Answer 1

这应该给你你正在寻找的东西：function zoomIn(el){&nbsp; // Current zoom level as a number&nbsp; const zLevel = +(el.style.zoom);&nbsp; // If current zoom level is equal or grater than 8 then set it to 8&nbsp; // otherwise double it&nbsp; el.style.zoom = (zLevel >= 8) ? 8 : (zLevel * 2);}https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator查看该链接以了解有关“？（三元）“运算符。你可以这样使用它：<!-- inline --><button id="zoomIn" onclick="zoomIn(this)">Zoom In</button>或// Zoomable elementconst zoomable = document.getElementById('mainVP');// Zoom button: this can be the zoomable element itself or any other elementdocument.getElementById('zoomIn').onclick = e => {&nbsp; zoomIn(zoomable);};

Answer 2

NASA的答案似乎比我最终的解决方案要简洁得多，我现在知道了三元算子。但我只是不知道如何使用代码的“可缩放元素”或“缩放按钮”部分。一旦我知识多一点，我会重新审视这一点。我现在回到了我原来的技术，经过一些调试后，我意识到getElementById返回0。所以我用getComputedStyle代替了：&nbsp; function zoomIn() {&nbsp; &nbsp; var elem = document.getElementById("mainVP");&nbsp;&nbsp; &nbsp; &nbsp; var zoomNow =&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.getComputedStyle(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem, null).getPropertyValue("zoom");&nbsp; &nbsp; if (zoomNow == 8) {&nbsp; &nbsp; &nbsp; document.getElementById('mainVP').style.zoom = 8;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; zoomNow = zoomNow*2;&nbsp; &nbsp; &nbsp; document.getElementById('mainVP').style.zoom = zoomNow;&nbsp; &nbsp; }}