Изменение единиц измерения без CSS значений с помощью JS функций

Question

Я хочу изменить безразмерное масштабирование элемента 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>

Answer 1

Спасибо за ответы, особенно НАСА. Ответ НАСА кажется гораздо более кратким, чем мое окончательное решение, и теперь я знаю о тернарных операторах. Но я просто еще не знаю, как использовать разделы кода «масштабируемый элемент» или «кнопка масштабирования». Я вернусь к этому, когда стану немного более осведомленным. На данный момент я вернулся к своей исходной технике и после некоторой отладки понял, что 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;
    }
}

Answer 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

Проверьте эту ссылку, чтобы узнать больше о "? (Тройной ) "оператор.

И вы можете использовать его так:

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