JS动态修改transform:scale(x)属性

今天写项目的时候碰到一个修改div缩放的问题，因为并不是直接给定一个固定大小的缩放比例，所以总结一下怎么使用JS控制动态缩放。

给定一个div：

<div id="box"></div>

<!-- 初始样式 -->
<style type="text/css">
	*{padding: 0;margin: 0;list-style: none;}
	#box{width: 200px;height: 200px;background: pink;}
</style>

<script type="text/javascript">
	var Scale = document.getElementById("box");
	var lxl = 2;    //这里为了达到效果，给变量设定了一个默认值，而没有对变量进行操作。
	Scale.style.transform = "scale("+ lxl +")";    //scale()在这里要使用拼接的方式才能生效。
</script>

这样就可以使用JS来控制缩放属性了，我们可以对lxl这个变量进行操作，从而达到动态的一个效果。

此外可以使用ES6的模板字符串来实现：

<script>
  let box = document.getElementById('box')
  let ScaleNum = 2
  box.style.transform = `scale(${ScaleNum})`
</script>

同样能达到缩放的效果。 

巴拉巴拉：

==主页传送门==