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

总结一下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()方法传入对象,对象里面包含widthheight属性;具体用法:

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

$(element).css({'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元素的内联样式里,否则获取到的值将为空。

原文地址:https://www.cnblogs.com/mixue/p/5351093.html