主页 / 问题 / 716339
Accepted
YourDeveloper
Asked:2020-09-09 21:23:41 +0000 UTC2020-09-09 21:23:41 +0000 UTC

修复 JS/jQuery 中的简单错误

  • 772
var num = 20;

$('.class').css('transform', 'translateX(num * 2px));

如何将现成的属性写入类：

transform: translateX(40px);
javascript

3 个回答

  1. Best Answer
    var num = 20;
$('.class').css('transform', 'translateX(' + (num * 2) + 'px)');
    • 1

  2. 'transform', 'translateX(num * 2px)'您可以使用类似 css3 函数的东西来描述转换num * 2px，并且只有当变量num直接在 css 中声明时。

    因为 num是一个 javascript 变量，那么它和乘法运算符一样，必须用引号分隔：

    var num = 20;

$('.class').css('transform', 'translateX(' + (num * 2) + 'px)');
    html {
  height: 100%;
  padding: 5px;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  border: #ccc solid 1px;
}

* {
  box-sizing: border-box;
}

.class {
  width: 100px;
  height: 50px;
  background: #000;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>

    带有css 变量+ 函数的选项calc()

    $('.class').css('transform', 'translateX(calc(var(--num)*2))');
    :root {
  --num: 20px;
}

html {
  height: 100%;
  padding: 5px;
}

body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  border: #ccc solid 1px;
}

* {
  box-sizing: border-box;
}

.class {
  width: 100px;
  height: 50px;
  background: #000;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>

    浏览器对 css 变量的支持 -这里。浏览器对 calc() 函数的支持 -这里。

    • 1 

  3. var num = 20;

$('.class').css('transform', 'translateX('+(num * 2)+'px)');
    .class {
width:50px;
height:50px;
background:#f1f1f1;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class"></div>

    • 0

相关问题