- 获取和设置元素的尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取元素
$div=$("div");
//获取宽度
console.log($div.width());//200
//获取高度
console.log($div.height());//200
//包含padding的宽度
console.log($div.innerWidth());//240
//包含padding的高度
console.log($div.innerHeight());//240
//包含padding和border的宽度
console.log($div.outerWidth());//244
//包含padding和border的高度
console.log($div.outerHeight());//244
//包含padding、border、margin的宽度
console.log($div.outerWidth(true));//284
//包含padding、border、margin的高度
console.log($div.outerHeight(true));//284
})
</script>
</body>
</html>
- 获取元素相对页面的绝对位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div_01{
width: 100px;
height: 100px;
border: 1px solid black;
background: #0000FF;
display: none;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取相对页面的绝对位置
var x=$div.offset().left;
console.log(x);//20
var y=$div.offset().top;
console.log(y);//20
//获取该元素距离其父元素的位置
var $div2=$("#div2");
var x=$div2.offset().left;
console.log(x);//42
var y=$div2.offset().top;
console.log(y);//42
})
</script>
</body>
</html>
- 获取可视区高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取可视区的宽度和高度
console.log($(window).width());//531
console.log($(window).height());//762
})
</script>
</body>
</html>
- 获取页面高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取页面的宽度和高度
console.log($(document).width());//531
console.log($(document).height());//762
})
</script>
</body>
</html>
- 获取页面滚动距离及滚动事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div_01{
width: 100px;
height: 100px;
border: 1px solid black;
background: #0000FF;
display: none;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<div style="width: 200px; margin: 20px; height: 200px;padding: 20px; border: 2px solid deeppink; position: relative;">
<div id="wrap" style="width: 50px; height: 50px; border:2px solid red; position: absolute;"></div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//获取页面的滚动距离
console.log($(document).scrollLeft());
console.log($(document).scrollTop());
//上述代码是不能获取到值的,因为没有添加滚动事件
//滚动事件代码如下
var $div3=$('<div id="div_01">div</div>');
$('body').append($div3);
$(document).scroll(function(){
// console.log("333");
if($(document).scrollTop()>=200){
$div3.slideDown(2000);
}else{
$div3.hide(1000); // 设置 隐藏
}
})
})
</script>
</body>
</html>