在javascript中获取DIV宽度和高度

I'm trying to get the div width and height as the user changes it and submit that number to another page. I can't seem to figure out how to get the width and height though.

我正在尝试获取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>

What's the proper way to do this?

这样做的正确方法是什么？

4 个解决方案

#1

Since you're already using jQuery, you can just do:

由于您已经在使用jQuery，因此您可以这样做：

var width;

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

#2

It's quite wrong to use ele.style.width to get the element's width!!!!!!

使用ele.style.width来获取元素的宽度是完全错误的!!!!!!

In native JavaScript, you can get a element's CSS through two ways:

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

Standard Method

window.getComputedStyle(ele)

For example,

例如，

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

IE(IE 8 And Before)

element.currentStyle

For example,

例如，

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

Why Not Use ele.style?

ele.style is just get the attribule style of ele. If you use ele.style.width, you just get the width of ele.style, not the real width of ele.

ele.style只是获得ele的归属风格。如果你使用ele.style.width，你只需要获得ele.style的宽度，而不是ele的实际宽度。

If you have done something like:

如果您做过类似的事情：

ele.style.width = "55px"

You get "55px" when using ele.style.width. If you haven't, you will get undefined.

使用ele.style.width时会得到“55px”。如果还没有，你会得到不确定的。

How To Do In jQuery?

Use $ele.width() (if you want the "exact" width, use $ele.outWidth()), jQuery has done everything for you.

使用$ ele.width（）（如果你想要“精确”宽度，使用$ ele.outWidth（）），jQuery已经为你做了一切。

#3

In plain vanilla JavaScript use

在普通的JavaScript中使用

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

This will give you numeric values, or

这将为您提供数值，或

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

If you want them in "CSS" format.

如果你想要它们的“CSS”格式。

#4

Since you're using jQuery, you'll probably want to know about the following:

由于您使用的是jQuery，因此您可能想知道以下内容：

$('#id').outerWidth() $('#id').outerWidth(true)

$（'＃id'）。outerWidth（）$（'＃id'）。outerWidth（true）

These will come in very handy. This allows you to find the total width of the div (padding, border, width and (optional argument) margin).

这些将非常方便。这允许您查找div的总宽度（填充，边框，宽度和（可选参数）边距）。

http://api.jquery.com/outerWidth/

http://api.jquery.com/outerWidth/