获取标签元素尺寸
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
padding: 10px;
border: 20px solid #000;
margin: 30px;
background: pink;
/* 内减模式 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<script src="./jquery.min.js"></script>
<script>
// 获取标签的占位
// width 和 height
// padding
// border
// margin
// 3个方法,4种使用方式
// width() 和 height()
// 获取 标签 的 内容
// 正常情况下 是 width 和 height
// 如果有 内减属性 就是 width / height - padding - border
// console.log( $('div').width() , $('div').height() );
// innerWidth() 和 innerHeight()
// 获取 标签 的 内容 + padding
// 正常情况下 是 width / height + padding
// 如果有 内减属性 就是 width / height - border
// console.log( $('div').innerWidth() , $('div').innerHeight() );
// outerWidth() 和 outerHeight()
// 获取 标签 的 内容 + padding + border
// 正常情况下 是 width / height + padding + border
// 有 内减属性 就是 width / height
// console.log( $('div').outerWidth() , $('div').outerHeight() );
// outWidth(true) 和 outHeight(true)
// 获取 标签 的 内容 + padding + border + margin
// 有 内减属性 就是 width / height + margin
// 正常情况下 是 width / height + padding + border + margin
console.log( $('div').outerWidth(true) , $('div').outerHeight(true) );
</script>
获取标签元素的位置
<style>
*{
margin: 0;
padding:0;
}
body{
height: 50000px;
}
div{
width: 600px;
height: 600px;
background: pink;
margin: 40px;
position: relative;
float: left;
}
p{
width: 300px;
height: 300px;
background: skyblue;
position: absolute;
top:100px;
left:200px;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script src="./jquery.min.js"></script>
<script>
// 获取标签元素的占位
// 1, offset()
// 可以获取
// 获取到 页面左上角 的间距
// 可以设定
// 设定参数是一个对象
// 设定的是 当前标签 与 页面左上角 的间距
// 与 标签 之前,写什么定位,写不写定位,写不写margin,写多少
// 都没有任何关系, offset() 写多少,跟 页面左上角 就间距多少
console.log($('p').offset());
// 以定位形式来设定 与 页面左上角的间距
// $('p').offset({left:0 , top:0});
// 2, position()
// 获取 当前标签 与 父级标签的 位置关系 --- 只获取定位的数值
// 执行结果是一个对象
// 只能获取,不能设定,不能传参
// 获取p标签与定位父级div之间的定位关系
// console.log( $('p').position() );
// offset()
// 能获取能设定
// 都是 与 页面左上角的 间距
// 不管是什么,就获取或者设定与页面左上角的间距
// position()
// 只能获取,不能设定
// 与父级的间距
// 但是 只 获取定位的属性
// 如果有 margin 是 不计算的
// 因为 margin 本身也算是 标签占位一部分
</script>
</body>
获取浏览器上卷高度
<style>
*{
margin: 0;
padding:0;
}
body{
height: 5000px;
}
div{
width: 100%;
height: 100px;
background: pink;
position: fixed;
top:0;
left:0;
display: none;
}
p{
width: 100px;
height: 100px;
background: blue;
position: fixed;
top:500px;
right:100px;
font-size: 40px;
color: red;
display: none;
}
</style>
</head>
<body>
<div></div>
<p>返回</p>
<script src="./jquery.min.js"></script>
<script>
// 获取浏览器上卷高度
// scrollTop() 上卷的高度
// scrollLeft() 平移的宽度
// 不同考虑浏览器的兼容性,jQuery会来处理
// 可以回去,也可以设定
// jquery中,滚动条的监听事件
$(window).scroll(function(){
// 判断 浏览器的上卷高度
if($(window).scrollTop() > 500){
// 大于 500 , 让 div,下拉显示
$('div').slideDown();
$('p').slideDown();
}else{
// 小于等于 500 , 当div,上卷隐藏
$('div').slideUp();
$('p').slideUp();
}
})
// 点击返回顶部
// 获取和设定时, 可以通过 $(window) 来进行操作
// 也可以通过 $('html') 来进行操作
// 设定自定义动画时, 必须只能使用 $('html') 来进行
// $(window) , 不支持 动画效果的
//
$('p').click(function(){
// 如果是设定,可以是 $(window) 或者 $('html')
// 不过 这个是 瞬间完成 的
// $(window).scrollTop(0);
// 通过自定义动画,使用动画效果完成
// 只能是 $('html') 来执行
$('html').animate( { scrollTop: 0 } , 2000 );
})
// 总结
// 页面上卷操作
// 1, 获取 和 设定
// scrollTop() scrollLeft()
// 没有参数是获取,有参数是设定
// 获取和设定的对象,可以是 $(window) 或者 $('html')
// window 是一个 JavaScript 的 顶级对象
// 要使用 jquery 的语法 必须要 加 $() 来转化
// $('html') 通过 html 标签名称 来获取标签对象 --- 选择器语法
//
// 2, 自定义动画效果
// $('html').animate( {scrollTop:数值} , 时间 );
// 只有 $('html') 支持动画效果
</script>
</body>