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这个变量进行操作,从而达到动态的一个效果。

巴拉巴拉:

==主页传送门==

猜你喜欢

转载自blog.csdn.net/weixin_42941619/article/details/88817149