首页 > 代码库 > 深入学习jQuery元素尺寸和位置操作

深入学习jQuery元素尺寸和位置操作

×
目录
[1]尺寸设置 [2]位置设置

前面的话

  对于javascript来说,元素尺寸有scroll、offset、client三大属性,以及一个强大的getBoundingClientRect()方法。而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>

<iframe style="width: 100%; height: 90px;" src="http://sandbox.runjs.cn/show/syh7ofmx" frameborder="0" width="320" height="240"></iframe>

  这个方法同样能计算出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>

<iframe style="width: 100%; height: 90px;" src="http://sandbox.runjs.cn/show/5lnryjpd" frameborder="0" width="320" height="240"></iframe>

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>

<iframe style="width: 100%; height: 90px;" src="http://sandbox.runjs.cn/show/dykvrwsn" frameborder="0" width="320" height="240"></iframe>

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>

<iframe style="width: 100%; height: 190px;" src="http://sandbox.runjs.cn/show/vhdux485" frameborder="0" width="320" height="240"></iframe>

【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>

<iframe style="width: 100%; height: 90px;" src="http://sandbox.runjs.cn/show/fgm5c2ra" frameborder="0" width="320" height="240"></iframe>

【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>

<iframe style="width: 100%; height: 110px;" src="http://sandbox.runjs.cn/show/waazuznv" frameborder="0" width="320" height="240"></iframe>

位置设置

【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 8console.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>

<iframe style="width: 100%; height: 60px;" src="http://sandbox.runjs.cn/show/fhxd82qo" frameborder="0" width="320" height="240"></iframe>

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>

<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/moqgbgod" frameborder="0" width="320" height="240"></iframe>

【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>

<iframe style="width: 100%; height: 180px;" src="http://sandbox.runjs.cn/show/qleqrteq" frameborder="0" width="320" height="240"></iframe>

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>

<iframe style="width: 100%; height: 180px;" src="http://sandbox.runjs.cn/show/zkebhmai" frameborder="0" width="320" height="240"></iframe>

最后

  关于元素的位置和尺寸操作,jQuery把javascript中的scroll、offset、client和getBoundingClientRect()重新整合。对于常用的宽高尺寸设置了width/height、innerWidth/innerHeight、outerWidth/outerHeight这6个方法;而对于位置操作,则设置了position()、offset()/offsetParent()、scrollLeft()/scrollTop()这5个方法

  欢迎交流

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>

深入学习jQuery元素尺寸和位置操作