本文将分享jQuery 1.9.1版本的位置大小操作的相关内容,包括尺寸与位置处理以及相关API的使用方法。
获取尺寸与位置
获取尺寸
使用如下API获取元素尺寸:
var width = $(selector).width(); //获取元素宽度
var height = $(selector).height(); //获取元素高度
var innerWidth = $(selector).innerWidth(); //获取元素内宽度(包含padding)
var innerHeight = $(selector).innerHeight(); //获取元素内高度(包含padding)
var outerWidth = $(selector).outerWidth(); //获取元素外宽度(包含padding和border)
var outerHeight = $(selector).outerHeight(); //获取元素外高度(包含padding和border)
var trueOuterWidth = $(selector).outerWidth(true); //获取元素真实外宽度(包含padding、border和margin)
var trueOuterHeight = $(selector).outerHeight(true); //获取元素真实外高度(包含padding、border和margin)
其中,$(selector)
是选择器,可以是class、id或标签等。
获取位置
使用如下API获取元素位置:
var position = $(selector).position(); //获取元素相对于父元素的位置
var offset = $(selector).offset(); //获取元素相对于页面的位置(包含margin)
示例说明
我们可以创建一个div来测试以上API,HTML代码如下:
<div id="test" style="width:100px;height:100px;padding:10px;border:5px solid red;margin:20px;"></div>
接下来我们可以使用以上API测试该div的尺寸与位置:
var width = $("#test").width(); //120
var height = $("#test").height(); //120
var innerWidth = $("#test").innerWidth(); //140
var innerHeight = $("#test").innerHeight(); //140
var outerWidth = $("#test").outerWidth(); //150
var outerHeight = $("#test").outerHeight(); //150
var trueOuterWidth = $("#test").outerWidth(true); //190
var trueOuterHeight = $("#test").outerHeight(true); //190
var position = $("#test").position(); //{top: 20, left: 20}
var offset = $("#test").offset(); //{top: 40, left: 40}
设置尺寸与位置
设置尺寸
使用如下API设置元素尺寸:
$(selector).width(value); //设置元素宽度
$(selector).height(value); //设置元素高度
$(selector).innerWidth(value); //设置元素内宽度
$(selector).innerHeight(value); //设置元素内高度
$(selector).outerWidth(value); //设置元素外宽度
$(selector).outerHeight(value); //设置元素外高度
设置位置
使用如下API设置元素位置:
$(selector).position({top: value1, left: value2}); //设置元素相对于父元素的位置
$(selector).offset({top: value1, left: value2}); //设置元素相对于页面的位置
示例说明
我们可以创建一个div来测试以上API,HTML代码如下:
<div id="test" style="width:100px;height:100px;padding:10px;border:5px solid red;margin:20px;position:absolute;"></div>
接下来我们可以使用以上API测试该div的尺寸与位置:
$("#test").width(200); //设置元素宽度为200px
$("#test").height(200); //设置元素高度为200px
$("#test").innerWidth(220); //设置元素内宽度为220px
$("#test").innerHeight(220); //设置元素内高度为220px
$("#test").outerWidth(230); //设置元素外宽度为230px
$("#test").outerHeight(230); //设置元素外高度为230px
$("#test").position({top: 50, left: 50}); //设置元素相对于父元素位置
$("#test").offset({top: 100, left: 100}); //设置元素相对于页面位置
结语
通过本文的讲解,我们了解了如何获取元素尺寸和位置,以及如何设置元素尺寸和位置,并提供了相关API的使用方法。希望这篇文章能帮助您更好地掌握jQuery的位置大小操作。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery 1.9.1源码分析系列(十三)之位置大小操作 - Python技术站