DOM元素的大小和位置
HTML:
<div id="parent">
<div id="box">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测 试测试测试
</div>
</div>
CSS:
#parent{
position:absolute;
width: 400px;
height: 400px;
background-color: blue;
margin: 10px;
}
#box{
width: 200px;
height: 200px;
overflow: scroll;/**/
background-color: pink;
/*margin: 10px;*/
position: absolute; /*此时的offsetTop,offsetLeft,获取的值是相对于父元素的*/
top: 50px;
left: 50px;
border:10px solid red;
padding: 10px;
margin: 10px;/**/
}
var box = document.getElementById("box");
1.scollTop,scollLeft获取/设置滚动条被隐藏的内容的高度/宽度
box.scrollTop = 100;
// alert(box.scrollTop);
// alert(box.scrollHeight);
将滚动条设置为0:
scorllStar(box);
function scorllStar (elemnet) {
if (box.scrollTop!=0) {
box.scrollTop = 0;
};
}
2.offsetLeft 和 offsetTop 获取当前元素相对于父元素的位置
alert(box.offsetTop);
alert(box.offsetLeft);
alert(box.offsetParent); // 如果没有给父元素设置position非ie浏览器会返回body对象,ie会返回object,所以要想得到具体的元素需要给 父元素设置position的值。
求子元素距离body的值:
alert(box.offsetTop + box.offsetParent.offsetTop); // 60 子元素+父元素
如果要求多个嵌套层中的任意一个元素距离父html/body的值时,可以这样:
alert(newOffsetTop(box));
function newOffsetTop (elemnet) {
var top = elemnet.offsetTop;
var parent = elemnet.offsetParent;
while(parent!=null){
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
function newOffsetLeft (elemnet) {
var left = elemnet.offsetLeft
var parent = elemnet.offsetParent;
while(parent!=null){
left += parent.offsetLeft;
parent = parent.offsetParent;
}
return left;
}
3.scrollWidth, scollHeight 获取滚动内容的元素大小
alert(box.scrollWidth); //包含padding值,但不包含margin值,如果有滚动条,会减去滚动条的宽高值
alert(box.scrollHeight); //ie7显示的高度是内容高度不是元素的本身的高度
4.clientWidth,clientHeight获取元素可视区域的大小 包含padding值,减去边框,不包含margin值
alert(box.clientWidth);
alert(box.clientHeight);
5.clientLeft,clientTop 返回元素的左边框,上边框
alert(box.clientLeft);
alert(box.clientTop);
http://blog.csdn.net/xuantian868/article/details/3116442
http://blog.sina.com.cn/s/blog_48e6792c0100z7ge.html
转载于:https://www.cnblogs.com/wine/p/5057112.html
DOM元素的大小和位置相关推荐
- js 获取元素位置和大小_js 位置_Js宽度高度(详解)
一.js 获取元素的位置和大小----只读属性 1.元素的大小和位置 1.可视大小和位置 clientLeft,clientTop,clientWidth,clientHeight clientLef ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- html的区域大小,JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性...
在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大 ...
- C++ 笔记(23)— STL vector 类(实例化 vector、末尾插入、指定位置插入、数组方式访问元素、指针方式访问元素、删除元素、大小与容量区别)
1. vector 特点 vector 是一个模板类,提供了动态数组的通用功能,具有如下特点: 在数组末尾添加元素所需的时间是固定的,即在末尾插入元素的所需时间不随数组大小而异,在末尾删除元素也如此: ...
- dom元素滚动条高度 js_javascript 设置元素滚动大小
3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...
- Web API-DOM-滚动事件、加载事件和元素大小和位置
滚动事件 滚动触发元素:元素.addEventListener("scroll", function () { }); 加载事件 加载元素:window.addEventListe ...
- Vue实现DOM元素拖放互换位置
一.拖放和释放 HTML 拖放接口使得 web 应用能够在网页中拖放文件.这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作. 拖放的主要步骤是为 drop 事件定义一个释放区( ...
- vue 获取元素在浏览器的位置_JavaScript获取窗口位置和元素坐标(兼容版)
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
最新文章
- 操作系统知识点:全面
- volatile的用法
- Windows server 2003共享文件夹问题
- git在已忽略文件夹中不忽略指定文件
- WEB 3.0(非技术版)
- Linux make menuconfig查找并快速跳转指定驱动选项
- Docker 方式安装部署 rocketMQ 、部署 图形化界面控制台、rocketMQ 控制台
- Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法(终极方法,不成功来找我~)
- php中嵌套html代码和html代码中嵌套php方式
- php数组写杨辉三角java_用java实现杨辉三角的示例代码
- wps 插件_【追加功能】OFFICE插件管理工具重整后再上路,更好用易用。
- install ipython-notebook
- 软考之初级程序员(包含1990-2018历年真题详解+课本教材+模拟试卷+视频教程)
- excel筛选排序从小到大_Excel按颜色排序或筛选
- 软件工程师和程序员到底有多大的区别?
- 甲骨文裁员,这是一个危险信号
- 2020年中国共享电单车市场现状与格局分析,青桔、哈啰和美团占据市场主要份额「图」
- Android屏幕密度计算公式
- Arduino LED闪烁
- 文华软件登录显示请选择服务器,文华随身行 请先登入云服务器
热门文章
- css3 混合,css3混合模式
- 2021计算机科学调剂,2021北京科技大学计算机科学与技术专业接收调剂研究生的通知...
- .git文件夹_如何使用git把本地代码上传(更新)到github上
- 罗定职业技术学院计算机考试二级,2018年罗定职业技术学院五年一贯制单独招生术科考试成绩.PDF...
- java靜態常量_Java靜態變量、靜態常量、靜態方法
- testng_TestNG超时示例
- ROS的学习(七)ROS的话题
- 在如今的Web前端环境下,如何提升自己的竞争力?
- C++还有前景吗?做服务器这一块可以吗?
- docker 安装portainer、gogs、redis、mongodb、es、rabbitmq、mysql、jenkins、harbor