10

ユーザーが変更した 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>

これを行う適切な方法は何ですか？

4

4 に答える 4

21

ele.style.width要素の幅を取得するために使用するのはまったく間違っています!!!!!!

ネイティブ JavaScript では、次の 2 つの方法で要素の 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;

IE(IE8以前)

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の属性スタイルを取得するだけですele。を使用すると、 の実際の幅ではなく、 のele.style.width幅が得られます。ele.styleele

次のようなことをした場合：

ele.style.width = "55px"

を使用すると「55px」が得られますele.style.width。そうしないと、 undefined になります。

jQuery での操作方法

使用してください$ele.width()(「正確な」幅が必要な場合は を使用してください$ele.outWidth())、jQuery がすべてを行ってくれます。

于 2013-05-10T02:27:29.263 に答える
14

プレーンなバニラ JavaScript の使用

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

これにより、数値が得られます。または

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

「CSS」形式でそれらが必要な場合。

于 2013-05-09T21:56:00.350 に答える
6

すでにjQueryを使用しているので、次のことができます：

var width;

if (need == 1) {
   width = $("#web").width();
} else {
   width = $("#set").width();
}
于 2013-05-09T21:54:25.693 に答える
1

jQuery を使用しているため、おそらく次のことについて知りたいと思うでしょう。

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

これらは非常に便利です。これにより、div の合計幅 (パディング、ボーダー、幅、および (オプションの引数) マージン) を見つけることができます。

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

于 2013-05-10T00:55:13.313 に答える