深入学习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>

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

　　欢迎交流

时间： 2024-10-07 08:26:01

深入学习jQuery元素尺寸和位置操作的相关文章

223 jQuery 尺寸、位置操作

? jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. 1.4.1 jQuery 尺寸操作 ? jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型. 语法 代码演示 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("

js 表格、表单、元素尺寸和位置

复习 DOM : document object model DOM节点关系属性 childNodes 元素\注释\文本 children 元素 firstChild 第一个子节点 firstElementchild 第一个元素子节点 lastChild lastElementChild parentNode offsetParent previousSibling previousElementSibling nextSibling nextElementSibling 节点增删改,复制 do

JQuery元素属性和样式操作、以及设置元素和内容

一.JQury元素属性操作通过JQuery可以对元素本身的属性进行操作,包括获取属性的属性值,设置属性的属性值,并且可以删除属性值(attr()和removeAttr()).二.JQuery样式操作元素样式操作包括了:直接设置css样式.增加css样式.类别切换.删除类别.例如:$('div').css('color');//获取元素行内的css样式颜色.$('div').css('color'. 'pink');//设置我最喜欢的粉色.var box = $('div').css(['colo

DOM元素尺寸和位置

一.获取元素 CSS大小 1.通过style 内联获取元素的大小 var box = document.getElementById('box'); //获取元素 box.style.width; //200px.空 box.style.height; //200px.空 style 获取只能获取到行内style 属性的CSS 样式中的宽和高,如果有获取:如果没有则返回空. 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.ge

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> <style> .div1{ width:50px; height:50px; overflow:scroll; //设置滚动条 } </style> </head> <body> <div id="div" class="

JavaScript获取元素尺寸和大小操作总结

一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style

JS-学习－DOM元素尺寸和位置

一,获取元素的css大小 1.通过style内联获取元素的大小 var box = document.getElementById('box');    // 获得元素;     box.style.width;                             // 200px;     box.style.height; 2.通过计算获取元素的大小 var style = window.getComputedStyle ? window.getComputedStyle(box,nul

DOM元素尺寸与位置

// clientWidth, clientHeight 1. 增加边框.外边距,DOM实际大小不受影响 2. 增加滚动条,会减少DOM实际大小,原因不把滚动条的大小算在内 3. 增加内间距,会影响DOM实际大小 4. 在没有内边距和滚动条的情况下,没有设置CSS大小,那么IE浏览器会理解为0 // scrollWidth, scrollHeight 1. 增加边框,浏览器之间有兼容问题 2. 增加外间距,DOM实际大小不受影响 3. 增加滚动条,会减少DOM实际大小,原因不把滚动条的大小算在内

图解JQUERY尺寸及位置定义

最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerHeight().innerWidth(). outerHeight().outerHeight(true).outerHeight(false).outerWidth(true). outerWidth(false).position().offset().scrollTop().scrollLef