如何在JQuery中计算元素的宽度和高度

Question

我已编写此代码来计算单击时现有元素的高度和宽度。这是对的吗？

$('#submit').click(function(){
var width = ddbar.clientWidth;
var height = ddbar.clientHeight;
alert(width);
alert(height);
});

Answer 1

jQuery使得抓取元素宽度和高度非常容易。

请参阅：

• .width()
• .outerWidth() - 包括填充和边框
• .innerWidth() - 包括填充但不包含边框
• .height()
• .outerHeight()
• .innerHeight()

假设dbbar是一个DOM元素，您需要做的就是：

    //get height of ddbar
    ddbar.height();

    //get width of ddbar
    ddbar.width();

根据您的要求将它们换成内/外/等。

测试这个应该真的很容易吗？

Answer 2

您应该使用此代码，因为您正在使用jQuery，以便它可以发挥其浏览器兼容性的魔力：

$('#submit').click(function(){
var width = $(ddbar).width();
var height = $(ddbar).height();
alert(width);
alert(height);
});

当然，jQuery方法会更慢：http://jsperf.com/jq-width-vs-client-width

Answer 3

你去，

http://jsfiddle.net/qR8Zw/1/

$('#submit').click(function(){
    var width = $('#div').width();
    var height = $('#div').height();
    alert("Width" + width);
    alert("Height" +height);
});

欢呼声