【JS】23--案例三
2020-06-17 本文已影响0人
Daeeman
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素高</title>
</head>
<body>
<div id="box1">
box1
</div>
<div id="box2">box2</div>
<div id="box3">滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中.滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。
白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中</div>
<button onclick="showTop()">滚动距离</button>
<style>
#box1{ width: 200px;height: 200px;background-color: beige;}
#box2{ width: 200px;height: 200px;background-color: antiquewhite; border:10px solid orange;}
#box3{width: 200px;height: 200px;background-color: yellow; border:10px solid pink; overflow: auto;}
</style>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
console.log("box1:",box1.clientHeight,"box2:",box2.clientHeight,"box3:",box3.clientHeight)
//clientHeight 内容高 //clientWidth 内容宽
console.log("box1:",box1.offsetHeight,"box2:",box2.offsetHeight,"box3:",box3.offsetHeight)
// offsetHeight 内容+边框的高度 // offsetWidth 内容+边框的宽
console.log("box1:",box1.scrollHeight,"box2:",box2.scrollHeight,"box3:",box3.scrollHeight)
//定义一个函数showTop
function showTop(){
//获取到box3 滚动的距离
alert(box3.scrollTop);
}
// scrollTop 元素滚动的顶部距离
// scrollLeft 元素滚动的左右距离
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.header{
height: 120px;
background-color: lightgrey;
}
.nav{
height: 60px;
background-color: dodgerblue;
}
.content{
height: 1800px;
background-color: darkorange;
}
.footer{
height: 140px;
background-color: #484848;
color:#fff;
}
#toTop{
/* 固定画面右下角 */
/* 固定定位 */
position: fixed;
/* 偏移值 */
right:50px;
bottom:100px;
/* 宽高 */
line-height: 60px;
width: 60px;
text-align: center;
/* 背景 */
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="nav">nav</div>
<div class="content">内容</div>
<div class="footer">页脚</div>
<div id="toTop" onclick="goTop1()">top</div>
<script>
// 当单机totop按钮 让滚动条 慢慢的回到顶部
function goTop1(){
// 获取滚动顶部的距离 document.documentElement.scrollTop
// 1000 900 800 700 600 100 0
// 每次减少1/10 总共1000毫秒 每次 100毫秒 setInterval
var st = document.documentElement.scrollTop ;
var id = setInterval(function(){
// 重新设置scrollTop
var now = document.documentElement.scrollTop;
document.documentElement.scrollTop = now-(st/10);
// 如果 now -(st/10) <=0 停止间隔调用 clearInterval
if(now-(st/10)<=0){
clearInterval(id);
}
},100)
}
// 默认不出来
// 滚动的时候如果滚动的距离大于屏幕的高，才出来
// window.onscroll=function(){} 窗口滚动
// window.innerHeight 屏幕的高
// document.documentElement.scrollTop 滚动的距离
// 显示元素 style.display="block"
window.onscroll=function(){
var st = document.documentElement.scrollTop;//文档滚动顶部的距离
var wh = window.innerHeight;// 浏览器可视区域的高度
// 获取toTop
var toTop = document.getElementById("toTop");
if(st>wh){
toTop.style.display = "block";
}else{
toTop.style.display = "none";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.header{
height: 120px;
background-color: lightgrey;
}
.nav{
height: 60px;
background-color: dodgerblue;
}
.content{
height: 1800px;
background-color: darkorange;
}
.footer{
height: 140px;
background-color: #484848;
color:#fff;
}
#toTop{
position: fixed;
right:10px;
bottom:100px;
line-height: 60px;
width: 40px;
height: 500px;
text-align: center;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="nav">nav</div>
<div class="content">内容</div>
<div class="footer">页脚</div>
<div id="toTop"><p>top</p>
</div>
<script>
window.onscroll=function(){
var st = document.documentElement.scrollTop;
var wh = window.innerHeight
var toTop = document.getElementById("toTop");
if(st>wh){
toTop.style.display = "block";
}else{
toTop.style.display = "none";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.header{
height: 120px;
background-color: lightgrey;
}
.all{
padding-bottom:66px;
}
.all .nav{
position:fixed;
top:0;
left:0;
}
.nav{
height: 60px;
background-color: dodgerblue;
width: 100%;
}
.fixed{
padding-top:60px;
}
.fixed .nav{
position: fixed;
left:0;
width:100%;
top:0;
}
.content{
height: 1800px;
background-color: darkorange;
}
.footer{
height: 140px;
background-color: #484848;
color:#fff;
}
#toTop{
/* 固定画面右下角 */
/* 固定定位 */
position: fixed;
/* 偏移值 */
right:50px;
bottom:100px;
/* 宽高 */
line-height: 60px;
width: 60px;
text-align: center;
/* 背景 */
background-color: #fff;
display: none;
}
</style>
</head>
<body >
<div class="header">header</div>
<div class="nav">nav</div>
<div class="content">内容</div>
<div class="footer">页脚</div>
<div id="toTop" onclick="goTop()">top</div>
<script>
window.onscroll = function(){
var h = document.documentElement,scrollTop;
//获取浏览器的的滚动高度
var nav = document.querySelector(".nav");
var navh = nav.offsetTop;
//获取nav距离顶部的距离
if(h>nav){
document.body.classList.add("all");
}else{
document.body.classList.remove("all");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>我是可爱的文字</p>
<script>
var p = document.querySelector("p");
// alert(p.style.fontSize);
var obj = document.defaultView.getComputedStyle(p,null);
console.log(obj);
console.log(parseInt(obj.height));
console.log("offsetHeight",p.offsetHeight)
</script>
</body>
</html>
