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>

同样能达到缩放的效果。 

巴拉巴拉:

==主页传送门==

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值