jqueryを使用してフォームタイプ範囲をズームイン/ズームアウトする方法

Question

jqueryでを使用してズームイン/ズームアウトする方法を知りたいと思います。

div classをズームインしてズームアウトしようとしていますが、jqueryを使用してズームする方法がわかりません。

<input type="text" > 

Answer 1

CSS3は新しいzoom性質を持っていますが、ブラウザによっては、その上に、ベンダープレフィックスを使用する必要があります。

あなたは正の値（> 1）を使用することができますし、負の値

jQueryのソリューション

var range = document.getElementById("my-range"); 
 
var square = document.getElementById("square"); 
 

 
range.addEventListener("change", function() { 
 
    square.style.zoom = this.value; 
 
});

#square { 
 
    margin: 20px; 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<input id="my-range" type="range" step="0.25" min="0.25" max="4" /> 
 

 
<div id="square"></div>

を使用することができます減らすために、DIVのサイズを大きくするにはJavaScriptソリューション

$("#my-range").on("change", function() { 
 
    $("#square").css({"zoom": $(this).val() }); 
 
});

#square { 
 
    margin: 20px; 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="my-range" type="range" step="0.25" min="0.25" max="4" /> 
 

 
<div id="square"></div>

https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom