获取javascript中的DIV宽度和高度

我试图在用户更改div时获取其宽度和高度，并将该数字提交到另一个页面。但我似乎不知道如何获得宽度和高度

<script>
$(function() {
  $( "#set div" ).draggable({ 
    stack: "#set div",
    preventCollision: true,
    containment: $('#main_content'),
      stop: function(event, ui) {
          var mydiv = document.getElementById("set");
          var pos_x = ui.offset.left;
          var pos_y = ui.offset.top;

          var width = mydiv.style.width;        ----THIS DOESN'T WORK
          var height = mydiv.style.height;      ----THIS DOESN'T WORK

          var window_width = window.innerWidth;
          var window_height = window.innerHeight;
          var need = ui.helper.data("need");

          console.log(pos_x);
          console.log(pos_y);
          console.log(width);
          console.log(window_width);
          console.log(need);

          //Do the ajax call to the server
          $.ajax({
              type: "POST",
              url: "updatecoords.php",
              data: { x: pos_x, y: pos_y, need_id: need, width: width, height: height, window_width: window_width, window_height: window_height}
            }).done(function( msg ) {
              alert( "Data Saved: " + msg );
            });  
      }
  });
});
</script>

$（函数（）{
$（“#set div”）.draggable（{
堆栈：“#设置div”，
对,，
包含：$（“#主要内容”），
停止：功能（事件、用户界面）{
var mydiv=document.getElementById（“set”）；
var pos_x=ui.offset.left；
var pos_y=ui.offset.top；
var width=mydiv.style.width；----这不起作用
var height=mydiv.style.height；----这不起作用
var window_width=window.innerWidth；
var window_height=window.innerHeight；
var need=ui.helper.data（“need”）；
控制台日志（pos_x）；
控制台日志（位置y）；
控制台。原木（宽度）；
控制台日志（窗口宽度）；
控制台日志（需要）；
//对服务器执行ajax调用
$.ajax({
类型：“POST”，
url:“updatecoords.php”，
数据：{x:pos_x，y:pos_y，need_id:need，width:width，height:height，window_width:window_width，window_height:window_height}
}).done（函数（msg）{
警报（“保存的数据：“+msg”）；
});  
}
});
});

---

正确的方法是什么？

既然您已经在使用jQuery，您只需执行以下操作：

var width;

if (need == 1) {
   width = $("#web").width();
} else {
   width = $("#set").width();
}

---

在普通JavaScript中使用

var width = mydiv.offsetWidth;
var height = mydiv.offsetHeight;

这将为您提供数值，或

var width = mydiv.offsetWidth + 'px';
var height = mydiv.offsetHeight + 'px';

---

如果您希望它们采用“CSS”格式。

因为您使用的是jQuery，您可能需要了解以下内容：

$（'#id'）.outerWidth（） $（'#id'）。外径（真）

这些会很方便的。这允许您查找div的总宽度（填充、边框、宽度和（可选参数）边距）

---

使用

ele.style.width

来获取元素的宽度是非常错误的

在本机JavaScript中，可以通过两种方式获取元素的CSS：

标准方法 比如说,

var ele = document.getElementById("content"), // Do not use #
    eleStyle = window.getComputedStyle(ele);
/* Below is the width of ele */
var eleWidth = eleStyle.width;

var ele = document.getElementById("content"), // Do not use #
    eleStyle = ele.currentStyle;
/* Below is the width of ele */
var eleWidth = eleStyle.width;

IE（IE 8及之前） 比如说,

var ele = document.getElementById("content"), // Do not use #
    eleStyle = window.getComputedStyle(ele);
/* Below is the width of ele */
var eleWidth = eleStyle.width;

var ele = document.getElementById("content"), // Do not use #
    eleStyle = ele.currentStyle;
/* Below is the width of ele */
var eleWidth = eleStyle.width;

为什么不使用

ele.style

？

ele.style

只是获取

ele

的属性样式。如果使用

ele.style.width

，则只获得

ele.style

的宽度，而不是

ele

的实际宽度

如果您做了如下操作：

ele.style.width = "55px"

使用

ele.style.width

时得到“55px”。如果你没有，你将得到未定义

如何使用jQuery？

---

使用

$ele.width（）。我如何告诉脚本如果need=1，那么var width=$（“#web”）.width（）我编辑了答案以考虑need的值。对于任何想知道的人来说，
offsetWidth
是两个选项中速度较快的一个：