Question

我正在尝试使用JavaScript编辑css进行以下数学运算。这是我正在尝试的计算：

calc((100% / first) - (second * 2))

我不确定问题是什么，但它不起作用。我试图删除所有变量，只有数字（100％/ 3），这就有效。

这是JSFiddle，这是实际的代码：

$(document).ready(function() {
  var first = 3;
  var second = 10;

  $("p").css({
    // (100% / first) - (second * 2)
    "width": "calc((100%/" + first + ") - (" + second " * 2))"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>

Answer 1

$(document).ready(function () {
    var first = 3;
    var second = 10;
    
    $("p").css({
		// (100% / first) - (second * 2)
        "width": "calc( 100% / " + first + " - " + second + " * 2px)"
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a heading</h2>

    <p style="background-color:#ff0000">This is a paragraph.</p>
    <p style="background-color:#00ff00">This is a paragraph.</p>
    <p style="background-color:#0000ff">This is a paragraph.</p>
    <p>This is a paragraph.</p>
</body>

通过JavaScript编辑css（使用calc）

1 个答案: