Set scale jquery

cbeh67ev  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(221)

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

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

kiz8lqtg1#

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

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

im9ewurl2#

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

  1. const a = 0.1;
  2. const b = 0.1;
  3. const scale = a + b;
  4. document.querySelectorAll(".item").forEach((elItem) => {
  5. elItem.style.setProperty("--scale", scale);
  6. });
  1. .item {
  2. width: 100px;
  3. height: 100px;
  4. background: blue;
  5. scale: var(--scale, 1); /* Use --scale CSSVar or default to 1 */
  6. }
  1. <div class="item"></div>

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

展开查看全部

相关问题