系列属性(offset、scroll、client)
2024-09-01 09:39:34
一、offset系列属性
<div id="dv"></div>
<!-- 已在style标签里设置div宽高各100px -->
<script>
//在style标签里面的样式属性无法获取,但是在style属性中设置的样式可以获取
console.log(document.getElementById("dv").style.width);//为空---无法获取 //所以引出了offset系列,总共有四个属性如下:
//1.可以通过offsetWidth获取元素的宽(带边框)
console.log(document.getElementById("dv").offsetWidth);//100 //2.可以通过offsetHeight获取元素的高(带边框)
console.log(document.getElementById("dv").offsetHeight);//100 //3.可以通过offsetLeft获取元素距离左边的值
//注意:
//没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
//脱离文档流,值=自己的left+自己的margin
console.log(document.getElementById("dv").offsetLeft);//8---没有清除边距 //4.可以通过offsetLeft获取元素距离上边的值
console.log(document.getElementById("dv").offsetTop);//8---没有清除边距
//注意:
//没有脱离文档流,值=父级元素的margin和padding和border+自己的margin
//脱离文档流,值=自己的left+自己的margin
</script>
二、scroll系列属性
获取和封装
<div id="dv"></div>
<!-- 已在style标签里设置div宽高各100px -->
<script>
//scrollWidth:获取元素实际内容的宽(不带边框),如果元素里面没有内容,就是元素的宽
console.log(document.getElementById("dv").scrollWidth);//100
//scrollHeight:获取元素中内容的实际高度(不带边框),如果元素里面没有内容或者内容高度没有超过元素的高就是元素的高,超过以后就是内容的高度
console.log(document.getElementById("dv").scrollHeight);//100
//scrollTop:获取向上卷曲的距离-----当出现滚动条时
console.log(document.getElementById("dv").scrollTop);//0
//scrollLeft:获取向上卷曲的距离------当出现滚动条时
console.log(document.getElementById("dv").scrollLeft);//0
</script>
<script>
//封装函数:实时获取向左卷曲的距离和向上卷曲的距离
function getScroll(){
return {
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
}
}
//浏览器的滚动事件-----需要设置高度出现滚动条,然后滚动鼠标才会触发
window.onscroll=function(){
console.log(getScroll().top);
}
</script>
案例:固定导航栏案例
<!-- 固定导航栏案例-->
<div id="nav">设置了宽度100%,高度50px,红色背景</div>
<div id="navbar">设置了宽度100%,高度10px,黄色背景</div>
<div id="main">设置了宽度100%,高度1000px,蓝色背景</div>
<script>
//效果预期:拖动滚动条,让黄色导航栏始终在屏幕的上面
//获取卷曲部分距离
function getScroll(){
return {
left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
}
}
//注册滚动事件
window.onscroll=function(){
//如果卷曲部分距离大于等于红色部分的高度
if(getScroll().top>=document.getElementById("nav").offsetHeight){
//黄色部分应该设置固定定位在顶部
document.getElementById("navbar").style.position="fixed";
document.getElementById("navbar").style.left="0";
document.getElementById("navbar").style.top="0";
//蓝色部分的外边距应该=黄色部分额高度
document.getElementById("main").style.marginTop=document.getElementById("nav").offsetHeight+"px";
}else{//如果卷曲部分距离小于红色部分的高度,一切恢复
document.getElementById("navbar").style.position="";
document.getElementById("main").style.marginTop="";
}
}
</script>
三、client系列属性
<div id="dv">设置了宽高各500px,10px边框</div>
<script>
//clientWidth:获取可视区域的宽(没有边框)
console.log(document.getElementById("dv").clientWidth);//500
//clientHeight:获取可视区域的高(没有边框)
console.log(document.getElementById("dv").clientHeight);//500
//clientLeft:获取左边边框的宽度
console.log(document.getElementById("dv").clientLeft);//10
//clientTop:获取上边边框的宽度
console.log(document.getElementById("dv").clientTop);//10
</script>
最新文章
- 第一次做socket的一些心得
- hdu 1503 Advanced Fruits
- 【软件推荐】 Moom-窗口布局软件(V.3.2.2)【破解+汉化】
- C# 截取字符串方法(包含中英混合)
- lnmp常见问题
- oracle数据库创建用户,并且给用户授权
- Miller_Rabin codevs 1702 素数判定2
- 位运算反(~)与(&;)异或(^)或(|)右移(>;>;)左移(<;<;)
- HDU1028Ignatius and the Princess III母函数入门
- TCP/IP,http,socket,长连接,短连接
- webpack2 前篇
- [SDOI2009]E&;D
- oracle的卸载
- 公司内网接口ip城市查询分析
- fillder--信息面板展示serverIP
- [原创]RedisDesktopManager工具使用介绍
- squid常用操作
- 为什么QQ空间和QQ邮箱都是IE默认打开?
- tomcat7配置
- mysql 5.1超过默认8小时空闲时间解决办法(错误:com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure)