javascript - JQuery如何计算元素的宽度和高度

Question

我已经编写了这段代码来计算点击时现有元素的高度和宽度。这个对吗？

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

Answer 1

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

看：

• 。宽度（）
• .outerWidth() - 包括填充和边框
• .innerWidth() - 包括填充但不包括边框
• 。高度（）
• .outerHeight()
• .innerHeight()

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

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

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

根据您的要求将它们切换为内部/外部/等。

测试这个真的很容易吗？

Answer 2

干得好，

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

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

干杯

Answer 3

您应该使用此代码，因为您使用的是 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