前边的话

  对于javascript来讲,成分尺寸有scrolloffsetclient3大属性,以及一个强劲的getBoundingClientRect()形式。而jQuery有着相应的特别便利的章程。本文将详细介绍jQuery中的成分尺寸和岗位操作

 

尺寸设置

  在CSS中,宽高有二种象征,分别是content-box、padding-box和border-box里的两种宽高。能够独家对应于jQuery中height()/width()、innerHeight()/innerWidth()和outerHeight()/outerWidth()

  [注意]对此原生javascript来讲,offsetWidth类属性不大概获得隐藏元的值,而jQuery那一个获得宽高的法子能够

【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()方法中包括3个参数时,能够设置宽高值。那个参数能够是一个正整数代表的像素数,或是整数和3个可选的叠加单位(默许是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()方法用来赢得成分集结中第3个成分的最近计量宽高值,包涵padding,border和选拔性的margin。重临1个平头(不分包px)表示的值

  当参数为false或无参数时,表示不包含margin,不然包罗margin

  [注意]假定在3个空集合上调用该方法,则会回来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某个不一致,规则如下

  一、当成分本人不是fixed定位,且父级成分存在经过一定的要素,offsetParent()的结果为离作者因素近来的经过一定的父级成分

  2、当成分本人装有fixed定位,或父级成分都未通过一定,则offsetParent()的结果为html

  三、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()方法能够承受3个包蕴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()方法还行1个函数作为参数。在函数中,成分在万分的要素集结中的索引地点作为第多少个参数,当前坐标作为第壹个参数。这几个函数再次回到二个分包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这5个法子;而对于地方操作,则设置了position()、offset()/offsetParent()、scrollLeft()/scrollTop()这五个点子

  应接交换

相关文章

网站地图xml地图