JQ 获取元素尺寸+方法的扩充篇

JQ获取元素尺寸

• 获取元素的尺寸

  1. width(), height()

     返回的是元素的宽度和高度(不包含padding, border, margin)

     console.log($("#div3").width(), $("#div3").height());
     

  2. innerWidth(), innerHeight()

     返回元素的宽度和高度(包含padding, 不包含border和margin)

     console.log($("#div3").innerWidth(),$("#div3").innerHeight());
     

  3. outerWidth, outerHeigh

  返回元素的宽的和高度(包含padding, border, 不包含margin)

  console.log($("#div3").outerWidth(),$("#div3").outerHeight());
  

• 获取元素的位置

  1. offset()

     返回的是jq对象相对于整个文档的位置对象，该方法返回一个offset对象, 该对象包含两个属性:left和top

     var offsetObj = $("#div3").offset();
     console.log(offsetObj.left, offsetObj.top);
     

  2. position()

     返回的是jq对象相对于距离最近的, 设置了非static定位的祖先元素,，

     该方法返回一个position对象, 该对象包含两个属性:left和top

     var positionObj = $