javascript - 通过 JavaScript 编辑 css(使用 calc)

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>