.cssはcalc（）を楽しんでいませんか？

Question

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

これは主に書式設定の問題です。私はそれが間違っていることを知っていますが、私は何をすべきかを知ることができませんでした。要するに、すでに存在するキャンバスの余白を設定しようとしていますが、その問題は"margin-left": "calc((window.innerWidth - 600px)/2)"部分です。この部分がそれに含まれていないときには、この部分のすべての部分が完璧に機能しますが、このコードがあるとすぐに機能しなくなります。

margin-leftは、ウィンドウの幅からキャンバスの幅（これは600ピクセルの部分）を引いた値に設定され、画面の中央に均等に収まるように半分に分割されます。数式の形式が間違っていますか？それを間違ってコーディングしようとしていますか？あるいは、.cssはcalc（）と似ていませんか？

Answer 1

あなたは、JSが他の人が言ったようにそれを評価させるために、JavaScriptのwindow.innerWidthを引用符の外に置かなければなりません。

それとも、このようにCSSのVWのプロパティを使用することができます。

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

その後、ウィンドウのリサイズに再評価する必要はありません。

Answer 2

CSS calcプロパティはJavaScriptではありません。 DOMにはアクセスできません。 window.innerWidthと一緒に使用することはできません。

カルク値は、これらのいずれかになります

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

もMDNを参照してください。

---

JSでプロパティを設定するので、JavaScriptを使用してサイドを計算し、それに基づいてプロパティ値を生成できます。 window.innerWidthが変更された場合に更新できるように、おそらくresizeイベントをバインドすることに注意してください。