.css 不喜欢做 calc()？

Question

$(document).ready(function(){
   $("canvas").css({"border": "5px dotted white", "width": "600px", "height": "450px", "margin-left": "calc((window.innerWidth - 600px) / 2)"});
});

这主要是我遇到的格式问题。我知道我做错了，但我一直无法弄清楚该怎么做。简而言之，我正在尝试为已经存在的 canvas 设置一个 margin-left，问题是 "margin-left": "calc((window.innerWidth - 600px) / 2)" 部分。当这部分不在其中时，其他所有部分都工作得很好，但当这段代码出现时它会立即停止工作，我认为这是错误的。

我如何格式化它以便将 margin-left 设置为 window 的宽度减去 canvas 的宽度（即 600px 部分），然后除以一半它均匀地适合屏幕中间。是不是公式格式错了？尝试编码是错误的吗？还是 .css 不像 calc()？

Answer 1

CSS calc 属性不是 JavaScript。它无权访问 DOM。您不能将它与 window.innerWidth.

一起使用

计算值可以是以下任何一个：

<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

另见 MDN。

因为你是用JS设置属性，你可以用JavaScript计算边，并根据它生成属性值。请注意，您可能希望绑定一个调整大小事件，以便在 window.innerWidth 更改时更新它。

Answer 2

你必须将 Javascript 的 window.innerWidth 放在引号外，让 JS 像其他人那样评估它。

或者您可以像这样使用 CSS vw 属性：

"margin-left": "calc((100vw - 600px) / 2)"

那么您不必在 window 调整大小时重新评估。

.css 不喜欢做 calc()？

.css doesn't enjoy doing calc()?

html

css

margin

calc