Set scale jquery

cbeh67ev  于 9个月前  发布在  jQuery
关注(0)|答案(2)|浏览(141)

请告诉我为什么我不能设置div的比例?

var a = 0.1;
var b = 0.1;
var scale = a+b;
$(".item").css('scale', scale)
.item {
  width: 100px;
  height: 100px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item"></div>
kiz8lqtg

kiz8lqtg1#

根据文件:
当一个数字作为值传递时,jQuery会将其转换为字符串,并将px添加到该字符串的末尾。如果属性需要px以外的单位,请将值转换为字符串,并在调用方法之前添加适当的单位。
因此,参数必须是字符串,而不是数字:

var a = 0.1;
var b = 0.1;
var scale = a+b;
$(".item").css('scale', scale.toString())
.item {
  width: 100px;
  height: 100px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item"></div>
im9ewurl

im9ewurl2#

此外,你需要像.css("scale",${scale}).css("scale", scale.toString())一样传递字符串(正如@Tom已经建议的那样),..
你不需要jQuery来完成这个任务,只需要简单的JS和CSS Var:

const a = 0.1;
const b = 0.1;
const scale = a + b;

document.querySelectorAll(".item").forEach((elItem) => {
  elItem.style.setProperty("--scale", scale);
});
.item {
  width: 100px;
  height: 100px;
  background: blue;
  scale: var(--scale, 1); /* Use --scale CSSVar or default to 1 */
}
<div class="item"></div>

MDN: Using CSS custom properties
MDN: CSS var()

相关问题