JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ctrl">
  <input type="number" id="zoomVal" value="2">
  <button onClick="addZoom();">add style="zoom: N"</button>
  <button onClick="removeZoom();">remove style="zoom: N"</button>
</div>
<div id="target">
  <div>この要素は幅300pxです。以下のスタイルが指定されています。</div>
  <xmp>  #target {
    zoom: 2;
    box-sizing: border-box;
    width: 300px;
    border: 1px solid skyblue;
  }</xmp>
</div>

<script>
function addZoom(){
    var tar = document.querySelector('#target');
    var val = document.querySelector('#zoomVal').value;
    tar.style.zoom = val;
}

function removeZoom(){
    var tar = document.querySelector('#target');
    tar.style.zoom = '';
}
</script>

CSS

html,body {margin: 0;padding: 0}

body {
  background-image:
    linear-gradient(to right, rgba(0,0,0, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0, 0.15) 1px, transparent 1px);
  background-size: 10px auto, auto 10px;
}

#ctrl{
  height: 50px;
  font-size: 18px;
  line-height: 50px;
}
#zoomVal{
  width: 3em;
  color: red;
}
#target{
  zoom: 2;
  box-sizing: border-box;
  width: 300px;
  border: 4px solid skyblue;
}