时间戳

首页 > 解决方案 > 使用 JS 函数更改无单位 CSS 值

javascript - 使用 JS 函数更改无单位 CSS 值

问题描述

我想用函数修改 div 的无单位缩放值。我知道我可以用一堆 else 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>

标签： javascriptcss

解决方案

这应该给你你正在寻找的东西：

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

查看该链接以了解有关“？（三元）”运算符的更多信息。

你可以像这样使用它：

<!-- inline -->
<button id="zoomIn" onclick="zoomIn(this)">Zoom In</button>

或者

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

推荐阅读