jQuery 在javascript中获取DIV的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16471767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get DIV width and height in javascript
提问by user2362601
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?
这样做的正确方法是什么？
采纳答案by Strille
Since you're already using jQuery, you can just do:
由于您已经在使用 jQuery，您可以执行以下操作：
var width;
if (need == 1) {
width = $("#web").width();
} else {
width = $("#set").width();
}
回答by Daidai
It's quite wrong to use ele.style.widthto 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)
IE（IE 8 及之前）
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？
ele.styleis 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. 如果你没有，你将得到未定义。
How To Do In jQuery?
在 jQuery 中怎么做？
Use $ele.width()(if you want the "exact" width, use $ele.outWidth()), jQuery has done everything for you.
使用$ele.width()（如果您想要“精确”的宽度，请使用$ele.outWidth()），jQuery 已经为您完成了一切。
回答by Yuriy Galanter
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”格式。
回答by Aaron
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 的总宽度（填充、边框、宽度和（可选参数）边距）。
