通過JavaScript分配div的寬度和高度時，邊框框不起作用？

Question

我的<div>帶有border:1px solid red; 和box-sizing:border-box; 。 <div>的寬度和高度是使用JavaScript分配的（以便用戶可以從縱向切換為橫向）。

$("#cloud").width(width).height(height);//width=260.16,height=397.44

問題是box-sizing屬性不起作用。 它總是向div的高度和寬度添加2px（border）。

我試過的

1. 使用JavaScript分配的盒大小，仍然無法正常工作。
2. 如果我們使用CSS分配width ， height和box-sizing ，它會很好地工作。
3. 經過鍍鉻和邊緣測試。

那么，如何在用戶指定寬度和高度的情況下創建邊框框div？

注意：我正在JQuery全局函數jQuery( function(){ .. });編寫所有Javascript jQuery( function(){ .. });

這是JsFiddle https://jsfiddle.net/af1ohuxv/6/

Answer 1

在width()的文檔中，明確指出

請注意， .width("value")設置框的內容寬度，而不管CSS box-sizing屬性的值如何。

height() 。 不確定最終的預期結果是什么，但是您想使用innerWidth()和innerHeight() （或outerWidth()和outerHeight() ）代替：

$("#cloud").innerWidth(width).innerHeight(height);

Answer 2

例如，您可以使用.css（）進行處理

$("#cloud").css("width","400")

或與數組

$("#cloud").css({"width:"+width,"height:"+height})

https://jsfiddle.net/efkiss/af1ohuxv/12/