对于 javascript 来说,元素尺寸有、、三大属性,以及一个强大的方法。而 jQuery 有着对应的更为简便的方法。本文将详细介绍 jQuery 中的元素尺寸和位置操作
在 CSS 中,宽高有三种表示,分别是 content-box、padding-box 和 border-box 里的三种宽高。可以分别对应于 jQuery 中 height()/width()、innerHeight()/innerWidth() 和 outerHeight()/outerWidth()
【1】设置宽高
height()/width()
当 height()/width() 方法中不包含任何参数时,可以获取设置宽高值
css(width)和 width()之间的区别在于 width()返回一个没有单位的数值 (如 400),而 css(width) 返回带有完整单位的字符串(400px)。当然,高度也类似
- <div id="test" style="height:30px;width:10em">
- 测试内容
- </div>
- <button id="btn">
- 获取宽高
- </button>
- <div id="result">
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $('#btn').click(function() {
- $('#result').html('css()获取的高度:' + $('#test').css('height') + ';css()获取的宽度:' + $('#test').css('width') + ';height()获取的高度:' + $('#test').height() + ';width()获取的宽度:' + $('#test').width());
- })
- </script>
这个方法同样能计算出 window 和 document 的宽高
- $(window).width();
- $(document).width();
- $(window).height();
- $(document).height();
- <div id="test">
- 测试内容
- </div>
- <button id="btn">
- 获取宽高
- </button>
- <div id="result">
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $('#btn').click(function() {
- $('#result').html('内容宽:' + $(this).width() + ';内容高:' + $(this).height() + ';页面宽:' + $(document).width() + ';页面高:' + $(document).height() + ';window宽:' + $(window).width() + ';window高:' + $(window).height())
- })
- </script>
height(value)/width(value)
当 height()/width() 方法中包含一个参数时,可以设置宽高值。这个参数可以是一个正整数代表的像素数,或是整数和一个可选的附加单位 (默认是 px)
- <div id="test" style="background-color:pink">
- 测试内容
- </div>
- <button id="btn">
- 设置宽高
- </button>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $('#btn').click(function() {
- $('#test').height(30).width(100);
- })
- </script>
height(function(index,currentHeight))/width(function(index,currentWidth))
height()/width() 方法也可以以一个函数作为参数,该函数接受两个参数,index 参数表示元素在集合中的位置,currentHeight/currentWidth 参数表示原来的宽高。在这个函数中,this 指向元素集合中的当前元素,最终返回设置的宽高
- <button id="btn">
- 设置宽高
- </button>
- <div>
- 1
- </div>
- <div>
- 2
- </div>
- <div>
- 3
- </div>
- <div>
- 4
- </div>
- <div>
- 5
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $("#btn").click(function() {
- $('div').height(30).css('background-color', 'orange').width(function(index, currentWidth) {
- return currentWidth * (index + 1) / 10
- })
- })
- </script>
【2】可视宽高
可视宽高指设置宽高加上 padding 值。在 javascript 中,可视宽高用 clientWidth/clientHeight 表示。而在 jQuery 中,用 innerHeight() 和 innerWidth() 方法表示
innerHeight()/innerWidth()
innerHeight()/innerWidth() 方法不适用于 window 和 document 对象,可以使用 height()/width() 代替
- <div id="test" style="width:100px;height:30px;padding:2px;">
- 测试内容
- </div>
- <button id="btn">
- 设置宽高
- </button>
- <div id="result">
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $('#btn').click(function() {
- $('#result').html('设置高:' + $('#test').height() + ';设置宽:' + $('#test').width() + ';可视高:' + $('#test').innerHeight() + ';可视宽:' + $('#test').innerWidth())
- })
- </script>
【3】全宽高
全宽高指设置宽高再加上 padding、border、margin(可选)
如果获取 border-box 的宽高,javascript 使用 offsetwidth/offsetHeight 获取。而在 jQuery 中,有着功能更强大的 outerWidth()/outerHeight() 方法
outerWidth()/outerHeight()
outerWidth()/outerHeight()方法用来获取元素集合中第一个元素的当前计算宽高值,包括 padding,border 和选择性的 margin。返回一个整数 (不包含 px) 表示的值
当参数为 false 或无参数时,表示不包括 margin,否则包括 margin
[注意] 如果在一个空集合上调用该方法,则会返回 null
outerWidth()/outerHeight() 方法不适用于 window 和 document 对象,可以使用 height()/width() 代替
- <div id="test" style="width:100px;height:30px;padding:2px;border:1px solid black;margin:10px">
- 测试内容
- </div>
- <button id="btn">
- 设置宽高
- </button>
- <div id="result">
- </div>
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <script>
- $('#btn').click(function() {
- $('#result').html('border-box的宽度' + $('#test').outerWidth() + ';border-box的高度' + $('#test').outerHeight() + ';margin-box的宽度' + $('#test').outerWidth(true) + ';margin-box的高度' + $('#test').outerHeight(true))
- })
- </script>
【1】offsetParent()
jQuery 通过 offsetParent() 找到元素的定位父级
jQuery 与 javascript 有些不同,规则如下
1、当元素本身不是 fixed 定位,且父级元素存在经过定位的元素,offsetParent() 的结果为离自身元素最近的经过定位的父级元素
2、当元素本身具有 fixed 定位,或父级元素都未经过定位,则 offsetParent() 的结果为 html
3、body 元素的 offsetParent() 的结果也是 html
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <div id="box" style="position:relative;">
- <div id="test1" style="position:absolute;">
- </div>
- <div id="test2" style="position:fixed;">
- </div>
- </div>
- <script>
- console.log($('#test1').offsetParent()); //'<div id="box>'
- console.log($('#test2').offsetParent()); //'<html>'
- console.log($('#box').offsetParent()); //'<html>'
- console.log($('body').offsetParent()); //'<html>'
- </script>
【2】position()
position() 方法不接受参数,用来获取匹配元素中第一个元素的相对于定位父级的坐标
position() 返回一个包含 top 和 left 属性的对象,相当于 javascript 中的 offsetTop 和 offsetLeft
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <div id="box" style="position:relative;">
- <div id="test1" style="position:absolute;">
- </div>
- <div id="test2" style="position:fixed;">
- </div>
- </div>
- <script>
- console.log($('#test1').position().top, $('#test1').position().left); //0 0
- console.log($('#test2').position().top, $('#test2').position().left); //8 8
- </script>
【3】offset()
offset()
当 offset() 方法没有参数时,在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <div id="box" style="position:relative;">
- <div id="test1" style="position:absolute;">
- </div>
- <div id="test2" style="position:fixed;">
- </div>
- </div>
- <script>
- console.log($('#test1').offset().top, $('#test1').offset().left); //8 8
- console.log($('#test2').offset().top, $('#test2').offset().left); //8 8
- </script>
offset(coordinates)
offset() 方法可以接受一个包含 top 和 left 属性的对象,用整数指明元素的新顶部和左边坐标
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <button id="btn">
- 改变按钮位置
- </button>
- <script>
- $('#btn').click(function() {
- $(this).offset({
- top: 20,
- left: 20
- })
- })
- </script>
offset(function(index,coords))
offset() 方法可以接受一个函数作为参数。在函数中,元素在匹配的元素集合中的索引位置作为第一个参数,当前坐标作为第二个参数。这个函数返回一个包含 top 和 left 属性的对象
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <button id="btn">
- 改变按钮位置
- </button>
- <script>
- $('#btn').click(function() {
- $(this).offset(function(index, coords) {
- return {
- left: coords.left + 10,
- top: coords.top
- }
- })
- })
- </script>
【4】scrollTop()/scrollLeft()
scrollTop()/scrollLeft()
scrollTop()/scrollLeft() 方法不带参数时,用来获取匹配元素集合中第一个元素的当前水平或垂直滚动条位置
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
- 内容
- </div>
- <button id='btn'>
- 点击
- </button>
- <div id="result">
- </div>
- <script>
- $('#btn').click(function() {
- $('#result').html('scrollTop:' + $('#test').scrollTop() + ';scrollLeft:' + $('#test').scrollLeft())
- })
- </script>
scrollLeft(value)/scrollTop(value)
scrollTop()/scrollLeft() 方法可以接受一个用来设置滚动条水平或垂直位置的正整数
- <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">
- </script>
- <div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
- 内容
- </div>
- <button id='btn1'>
- 向下滚动
- </button>
- <button id='btn2'>
- 向上滚动
- </button>
- <script>
- $('#btn1').click(function() {
- $('#test').scrollTop($('#test').scrollTop() + 10);
- }) $('#btn2').click(function() {
- $('#test').scrollTop($('#test').scrollTop() - 10);
- })
- </script>
关于元素的位置和尺寸操作,jQuery 把 javascript 中的 scroll、offset、client 和 getBoundingClientRect() 重新整合。对于常用的宽高尺寸设置了 width/height、innerWidth/innerHeight、outerWidth/outerHeight 这 6 个方法;而对于位置操作,则设置了 position()、offset()/offsetParent()、scrollLeft()/scrollTop() 这 5 个方法
欢迎交流
来源: http://www.cnblogs.com/xiaohuochai/p/5923469.html