谈谈jQuery和js里有关位置和宽高的方法

Posted 2020-07-03

总结一下jQuery、原生js设置和获取位置、宽高的方法。

一、jQuery关于元素位置的方法

position() 方法：只能获取，不能设置。

可获取元素相对于其第一个position值不为static的祖先元素的偏移量，如果没有，则是相对于文档的偏移量；返回一个对象，包括两个属性:left，top; 属性值无单位，number类型。具体用法：

$(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量

offset()方法：既能获取，也能设置。

获取和设置元素相对于文档的偏移量。获取时返回一个对象，包括两个属性：left，top。属性值无单位，number类型；设置时给方法传入一个对象，可包括属性top,left；具体用法：

$(elemment).offset().left; //获取元素相对于文档的偏移量

$(element).offset({top:200,left:100}); //设置元素相对于文档的偏移量

scrollLeft()、scrollTop(),滚动方法：既能获取，也能设置。

可以获取和设置元素从顶部或者左侧已经滚动的值,获取时返回number类型的数值，设置时给方法传递一个数字参数。具体用法：

$(element).scrollLeft(); //获取元素滚动的left值

$(element).scrollLeft(200); //设置元素滚动的left值

二、jQuery关于元素宽高的方法

width()、height() 方法：既能获取，也能设置。

可获取和设置元素的宽度和高度。获取时，返回number类型；设置时，给方法传入数值类型的参数即可。具体用法：

$(element).width(); //获取元素宽度

$(element).width(200); //设置元素宽度 

innerWidth()、innerHight()方法：只能获取，不能设置。

可获取第一个匹配元素的内部宽度和高度，例如获取元素内部宽度时，包括width+padding,不包括border。

 

outerWidth()、outerHight()方法：只能获取，不能设置。

可获取第一个匹配元素的外部宽度和高度，有两种情况: （用获取元素外部宽度来举例）

      1、当方法内部不指定参数或者参数为false时，包括width+padding+margin;

      2、当方法内部参数为true时，包括width+padding+border+margin；

css()方法：既可获取，也可设置。

可 以获取和设置元素的宽高（当然也可获取和设置其他css属性，这里只是为了与其他几种设置获取元素宽高的方法做对比），当获取元素的宽高时，返回一个单位 为px的string字符串；当设置元素宽高时，给css()方法传入对象，对象里面包含width\height属性；具体用法：

$(element).css(‘width‘); //获取元素宽度

$(element).css({width:‘200px‘,height:‘300px‘});//设置元素的宽度和高度，也可以不要引号和单位

三、原生js关于元素位置的属性

offsetLeft、offsetTop属性：只可获取，不可设置（类似jQuery的position()方法）。

相对于其第一个position值不为static的祖先元素来计算偏移量，返回number类型数值。

 

style.left、style.top:既可设置，也可获取。

与offsetLeft、offsetTop属性相比，共同点：都是相对于其第一个position值不为static的祖先元素来计算偏移量；不同点：

  1、通过style,既可获取元素宽高，也可设置元素宽高

  2、style.left/style.top返回的是字符串（包含单位）

  3、要获取style.left/style.top需要事先定义，而且必须定义在html元素的内联样式里，否则获取到的值将为空。