JavaScript实现三种常用网页特效(offset、client、scroll系列)
作者:bear*6 发布时间:2023-08-27 11:54:30
一、元素偏移量 offset 系列
offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意: 返回的数值都不带单位
offset常用的属性有:
例如:给定一个子盒子和一个父盒子,并给他们一定的大小,来看看这些属性是怎样获得的:
<style>
*{
margin: 0px;
padding: 0px;
}
.father{
position: relative;
margin-left: 50px;
margin-top: 10px;
width: 200px;
height: 200px;
background-color: brown;
}
.son{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
console.log('father.offsetLeft',father.offsetLeft);
console.log('father.offsetTop',father.offsetTop);
console.log('son.offsetWidth',son.offsetWidth);
console.log('son.offsetHeight',son.offsetHeight);
</script>
</body>
打印结果为:
我们知道,offset可以帮助我们得到元素的大小和父元素,但是style属性也可以获取到相关属性,那么,他们的区别又是什么呢?
offset
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性,只能获取不能赋值
style
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性,可以获取也可以赋值
二、元素可视区 client 系列
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
例如,给定一个带边框的盒子,返回这些属性,看看结果。
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientTop:'+box.clientTop);
</script>
结果为:
可以发现,通过client系列的得到的盒子大小并不包含盒子的边框。
三、元素滚动 scroll 系列
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
例如:还是上面案例的盒子,我们打印其scroll系列属性,看看结果
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.scrollWidth:'+box.scrollWidth);
console.log('box.scrollHeight:'+box.scrollHeight);
console.log('box.scrollLeft:'+box.scrollLeft);
console.log('box.scrollTop:'+box.scrollTop);
</script>
结果为:
我们发现得到的盒子高度和宽度都是我们的给定值,和client系列得到的值是一样的,那么他们的区别是什么呢?现在我们给盒子里面添加超过盒子高度的内容:
<div class="box">
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端
</div>
打印结果为:
可以发现此时打印的盒子高度变大了,其实这个值是指盒子加上文字后自身实际的高度。
大家还会发现两次打印的box.scrollLeft和box.scrollTop的值都是0,这又是什么意思呢?
现在我们通过overflow:auto将盒子内超出的内容让其以滚动条的形式显示,然后给他添加滚动事件,如下所示:
var box = document.querySelector('.box')
box.addEventListener('scroll',function(){
console.log('box.scrollTop:'+box.scrollTop);
})
效果为;
发现得到的值是随着滚动来变化的,其实,box.scrollTop返回的是被卷去的上侧距离,如下图所示:
来源:https://blog.csdn.net/m0_48375854/article/details/121754311
猜你喜欢
- Internet Explorer 9 Platform 1.9.7916.6000 Preview 4微软今天公布了IE9 Platfor
- 注:IE8以前的版本均不支持该特性为了向文档中插入生成内容,可以使用:before与:after伪元素。如,我想在所有链接的后面加上&quo
- 相关代码:JavaScript写的日期时间控件,很好用 13个超酷的js显示时间效果 <html><head><
- 先给大家介绍下Python读取文件夹按数字排序的代码,内容如下所示:python中 os.listdir()方法用于返回指定的文件夹包含的文
- 之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab
- asp之家注:也许你还没有接触过使用js来调用asp文件,也许你也不知道如何用JS调用asp文件,甚至你也不知道JS调用asp文件有什么好处
- 定义:Dim MyArray() Redim MyArray(5)Session("StoredAr
- 记一次在写cli脚本的时候,碰到的一个问题。问题自己是写服务端的,有时候会写一些cli脚本去跑测试。习惯main.go写主流程,其他子文件写
- 缓存是基于Application实现的CacheState类,建议实例化时用名Cache程序代码<% Class Cache
- 我们可以通过更改注册表来解决这个问题: 打开注册表,进入到[HKEY_USERS\.DEFAULT\Control Panel\Intern
- 阅读《YUI学习笔记(1)》《YUI学习笔记(2)》YAHOO.lang.later,YAHOO.lang.trim,YAHOO.lang.
- 在“按需加载”的需求中,我们经常会判断当脚本加载完成时,返回一个回调函数,那如何去判断脚本的加载完成呢?我们可以对加载的 JS 对象使用 o
- 很多的网站都有记数器,用来记录网站的访问量,这给网站管理员即时了解本网站的运行及访问情况提供了很多的方便。笔者研究过很多用ASP编写的计数器
- 这个仿msn的右下角popup提示窗口效果很久以前收集的,现在整理出来给大家分享,需要的朋友可以拿去用,特点,提示窗口内容和js代码分离容易
- 首先我们解压$ unzip p8202632_10205_LINUX.zip解压后我们会发现多出了个文件夹,他是:Disk1,进入Disk1
- 训练的时候内存一直在增加,最后内存爆满,被迫中断。后来换了一个电脑发现还是这样,考虑是代码的问题。检查才发现我的代码两次存了loss,只有一
- 配置环境: 1、数 据 库:Oracle 8i R2 (8.1.7) for NT 企业版 2、安装路径:C:ORACLE 实现方法: 1.
- 实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利
- 检测是否注册成功<% Set Jpeg =Server.CreateObject("Persi
- 如果你是个赛车手,并且按一下按钮就能够立即更换引擎而不需要把车开到车库里去换,那会是什么感觉呢?MySQL数据库为开发人员所做的就好像是按按