Получить ширину и высоту DIV в javascript

Я пытаюсь получить ширину и высоту 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>

Как правильно это сделать?

8
ajax html javascript jquery size

4 ответов

поскольку вы уже используете jQuery, вы можете просто сделать:

var width;

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

это совершенно неправильно использовать ele.style.width чтобы получить ширину элемента!!!!!!

в родном JavaScript вы можете получить CSS элемента двумя способами:

Стандартный Метод

window.getComputedStyle(ele)

например,

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

т. е.(т. е. 8 и до)

element.currentStyle

например,

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 это просто стиль attribule из ele. Если вы используете ele.style.width, вы просто получаете ширину ele.style, не реальная ширина ele.

если вы сделали что-то вроде: 

ele.style.width = "55px"

вы получаете "55px" при использовании ele.style.width. Если вы этого не сделали, вы получите неопределенность.

как сделать в jQuery?

использовать $ele.width() (если вы хотите" точную " ширину, используйте $ele.outWidth()), jQuery сделал все для вас.

18

в обычном ванильном JavaScript используйте

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

это даст вам числовые значения, или

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

Если вы хотите их в формате" CSS".

11

поскольку вы используете jQuery, вы, вероятно, захотите узнать о следующем:

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

Это будет очень удобно. Это позволяет найти общую ширину поля div (заполнение, граница, ширина и (необязательный аргумент)).

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

1