1.窗口和文档的尺寸
$(window).height();
$(window).width();
$(document).height();
$(document).width();
//设置大小
$(window).width('300px');
2.元素的尺寸
//不包括padding
$("#ele").width();
$("#ele").height();
//包括padding ，不包括边框
$("#ele").innerHeight();
$("#ele").innerWidth();
//包括边框
$("#ele").outerHeight();
$("#ele").outerWidth();
注意：以上方法不能用于window和document对象，返回NaN
3.求元素的偏移量
offset
相对于document左上角的位置
position
相对于第一个具有定位性质的双亲元素
offsetParent
返回一个jquery对象，是具有定位性质的父亲节点
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#foo{
background-color: red;
position: absolute;
top:10px;
left:10px;
}
</style>
</head>
<body id="the_offset_parent">
<h1>Findding the Offset of an Element</h1>
<div id="foo">
<div id="bar">
Some Test inset #bar ,which id inside #foo
</div>
<div id="results"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var $foo=$('#foo');
var $bar=$('#bar');
var $results=$('#results');
var fooPostion=$foo.position();
var barPostion=$bar.position();
var fooOffset=$foo.offset();
var barOffset=$bar.offset();
var $fooOffsetParent=$foo.offsetParent();
var $barOffsetParent=$bar.offsetParent();
$results.append('<p>#foo postion.top'+fooPostion.top+"</p>")
.append('<p>#foo postion.left'+fooPostion.left+"</p>")
.append('<p>#bar postion.top'+barPostion.top+"</p>")
.append('<p>#bar postion.left'+barPostion.left+"</p>")
.append('<p>#foo offset.top'+fooOffset.top+"</p>")
.append('<p>#foo offset.left'+fooOffset.left+"</p>")
.append('<p>#bar offset.top'+barOffset.top+"</p>")
.append('<p>#bar offset.left'+barOffset.left+"</p>")
.append('<p>#foo fooOffsetParent'+$fooOffsetParent.attr('id')+"</p>")
.append('<p>#bar barOffsetParent'+$barOffsetParent.attr('id')+"</p>")
});
</script>
</body>
</html>
Paste_Image.png
4.滚动元素使其可见
！！！元素直接滚动到了顶部
$('#bar').click(function(){
var fooOffset=$('#foo').offset();
var destination=fooOffset.top;
$(document).scrollTop(destination);
})
5.元素居中显示
elOffset.top+elHeight/2-viewportHeight/2
$(document).ready(function(){
$('#bar').click(function(){
var viewportWidth=$(window).width();
var viewportHeight=$(window).height();
var $foo=$("#foo");
var elWidth=$foo.width();
var elHeight=$foo.height();
var elOffset=$foo.offset();
$(window).scrollTop(elOffset.top+elHeight/2-viewportHeight/2);
$(window).scrollLeft(elOffset.left+elWidth/2-viewportWidth/2);
});
});
6.判断元素是否可见,完全在视区中
<script type="text/javascript">
$(document).ready(function(){
var viewportWidth=$(window).width();
var viewportHeight=$(window).height();
var documentScrollTop=$(document).scrollTop();
var documentScrollLeft=$(document).scrollLeft();
var minTop=documentScrollTop,
maxTop=documentScrollTop+viewportHeight,
minLeft=documentScrollLeft,
maxLeft=documentScrollLeft+viewportWidth;
var $myElement=$('#myElement'),
elementOffset=$myElement.offset();
if(
(elementOffset.top>minTop&&elementOffset.top+elementHeight<maxTop)&&
(elementOffset.left>minLeft&&elementOffset.left+elementWidth<maxLeft)
){
console.log('element is visible');
} else {
console.log('element is not visible');
}
});
</script>
