client,offset,scroll系列
client(客户端),offset(偏移),scroll(滚动)
1.client系列
clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
clientLeft 内容区域到边框左部的距离，说白了,就是边框的宽度
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
border: 10px solid red;
padding: 50px;
}
</style>
</head>
<body>
<div class="box">aaa</div>
<script>
oBox=document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);//10
console.log(oBox.clientLeft);//10
console.log(oBox.clientWidth);//200
console.log(oBox.clientHeight)//200
</script>
</body>
2.屏幕的可视区域
<script type="text/javascript">
// 屏幕的可视区域
window.onload = function(){
// document.documentElement 获取的是html标签
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 窗口大小发生变化时，会调用此方法
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
3.offset系列
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="height: 2000px">
<div>
<div class="wrap" style=" width: 300px;height: 300px;position: relative">
<div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
/*
offsetWidth占位宽 内容+padding+border
offsetHeight占位高
* offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值
* offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
* */
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
}
</script>
4.scroll系列
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅
度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发
热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大
幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度
发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热
大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅
度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发
热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大幅度发热大
</p>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){
console.log(1111);
//页面向上卷起的高度
console.log('上'+document.documentElement.scrollTop);
//页面左侧卷起的高度
console.log('左'+document.documentElement.scrollLeft);
//宽度 包括内容 padding 边框
console.log('宽'+document.documentElement.scrollWidth);
//高度 包括内容 padding 边框
console.log('高'+document.documentElement.scrollHeight)
};
// 页面中的其他部分也可以做滚动监听事件
var s = document.getElementById('scroll');
s.onscroll = function(){
// scrollHeight : 内容的高度+padding 边框
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.scrollWidth);
console.log('高'+s.scrollHeight);
}
}
</script>
5.固定导航栏实例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding : 0;
}
.top{
width: 100%;
height: 80px; }
.content{
width: 100%;
height: 1000px;
background-color: gold;
/*position: relative;*/
}
.input{
width: 350px;
height: 60px;
background-color: #fff;
position: absolute;
top: 150px;
left: 40%;
}
.down{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1000;
background-color: saddlebrown;
display: none;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="content">
<div class="input"></div>
</div>
<div class="down"></div>
<script>
window.onload=function(){
oInput=document.getElementsByClassName('input')[0];
oDowm=document.getElementsByClassName('down')[0];
fromtop=oInput.offsetTop;
console.log(fromtop);
window.onscroll=function(){
var othertop=document.documentElement.scrollTop;
// console.log(othertop);
if(othertop>=fromtop){
oDowm.style.display='block';
}else{
oDowm.style.display='none';
}
};
}
</script>
</body>
client,offset,scroll系列的更多相关文章
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- client offset scroll 之间的区别
一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...
- JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏
原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
随机推荐
- 利用WPF建立自己的3d gis软件（非axhost方式）（三）矢量数据显示控制
原文:利用WPF建立自己的3d gis软件(非axhost方式)(三)矢量数据显示控制 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密 ...
- 再议指针---------函数回调（qsort函数原理）
我们是否能写一个这种函数: 能够对不论什么类型数据排序 不论什么人在使用该函数不须要改动该函数代码(即:用户能够不必看到函数源 码,仅仅会调用即可) 思考: 用户须要排序的数据的类型千变万化,可能是i ...
- VS2017十五项新功能体验
Visual Studio 2017十五项新功能体验 Visual Studio 2017正式已经于2017.3.7号正式发布,选在这一天发布也是为了纪念Visual Studio 二十周年.MVP ...
- Web报表进度条显示
创建插件 <script src="../CreateControl.js" type="text/javascript"></script& ...
- UWP 扩展/自定义标题栏的方法，一些概念和一些注意事项
原文 UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项 在 Windows 10 的前几个版本中将页面内容扩展到标题栏上还算简单,主要是没什么坑.直到一些新控件的引入和一些外观设计趋势变化之后 ...
- 利用tcpdump分析工具来验证tcp连接的建立和关闭过程
本文要求读者在阅读之前应该对TCP通过三次握手建立和关闭连接有一定的了解,本文并没有详细讲解三次握手,只是通过一个实例对三次握手进行了一下验证. tcp连接的建立和关闭想必大家都已经非常熟悉了!通过三 ...
- WPF 获取 ListView DataTemplate 中控件值
原文:WPF 获取 ListView DataTemplate 中控件值 版权声明:本文为博主原创文章,未经博主允许可以随意转载 https://blog.csdn.net/songqingwei19 ...
- OpenGL（十八） 顶点数组和抗锯齿（反走样）设置
顶点数组函数可以在一个数组里包含大量的与顶点相关的数据,并且可以减少函数的调用.使用顶点数组需要先启用顶点数组功能,使用glEnableClientState函数启用顶点数组,参数可以是GL_VERT ...
- error C2220: 警告被视为错误 - 没有生成“object”文件
原文:error C2220: 警告被视为错误 - 没有生成"object"文件 这种错误的原因是:原因是该文件的代码页为英文,而我们系统中的代码页为中文. 解决方案: 1. ...
- App.xaml介绍
在App.xaml.cs中指定 public App () { InitializeComponent(); MainPage = new XamarinDemo.MainPage(); } 同时,这 ...