js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft (一)
offsetLeft offsetTop offsetWidth offsetHeight
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框)。
offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框)。
offsetWidth:描述元素外尺寸宽度,是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个),不包括外边距和滚动条部分。
offsetHeight:同理 描述元素外尺寸高度,是指 元素内容高度+内边距高度(上下两个)+边框(上下两个),不包括外边距和滚动条部分。
clientLeft clientTop clientWidth clientHeight
clientLeft:元素的内边距的外边缘和边框的外边缘的距离,实际就是边框的左边框宽度
clientTop:同理边框的上边框的宽度
clientWidth:用于描述元素内尺寸宽度,是指 元素内容+内边距 大小,不包括边框、外边距、滚动条部分
clientHeight:同理 用于描述元素内尺寸高度,是指 元素内容+内边距 大小,不包括边框、外边距、滚动条部分
scrollTop scrollLeft scrollWidth scrollHeight
scrollWidth:内容区域尺寸加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等 !important
scrollHeight:同上
scrollTop:滚动条上方卷去的高度
scrollLeft:滚动条左边卷去的宽度
下面贴上调试代码:
<style>
*{margin:0;padding:0;}
#parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}
#child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}
#parent1{ padding: 10px; background-color: #fc8; width:300px; height:300px;overflow:auto ;clear:both; }
#child1 { background-color: #bfc; width: 400px; height: 400px;border: 10px solid #c8f;}
</style>
<body id="body"> <div id="parent">
<div id="child">
</div>
</div> <div id="parent1">
<div id="child1">
</div>
</div>
<script src="jquery_1.11.3.min.js"></script>
<script type="text/javascript"> var child = $("#child").get(0);
console.log($("#child"))//获得对象
console.log(child)//获得DOM元素
//$("#child")是一个对象 此处要获得DOM元素 因此要加get(0)
//get()是获取所有DOM元素的集合 因此加get(0) // console.log( "offsetParent: " + child.offsetParent.id);
// console.log( "offsetHeight: " + child.offsetHeight);
// console.log( "offsetWidth: " + child.offsetWidth);
// console.log( "offsetLeft: " + child.offsetLeft);
// console.log( "offsetTop: " + child.offsetTop); //---------------------------------------------------------------- // console.log( "clientHeight: " + child.clientHeight);
// console.log( "clientWidth: " + child.clientWidth);
// console.log( "clientLeft: " + child.clientLeft);
// console.log( "clientTop: " + child.clientTop); //---------------------------------------------------------------- var parent1 = $("#parent1").get(0);
// console.log( "clientHeight: " + parent1.clientHeight);
// console.log( "clientWidth: " + parent1.clientWidth);
console.log( "scrollHeight: " + parent1.scrollHeight);
console.log( "scrollWidth: " + parent1.scrollWidth);
//
// $("#parent1").scroll(function(){
// var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
// var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft
// console.log( "scrollTop: " + parent1.scrollTop);
// console.log( "scrollLeft: " + parent1.scrollLeft);
// }) </script>
</body>
注:此文为原创,如需转载请注明出处。
js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft (一)的更多相关文章
- js和jq中常见的各种位置距离之offsetLeft和position().left的区别(四)
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...
- js和jq中常见的各种位置距离之offset和offset()的区别(三)
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用o ...
- js和jq中常见的各种位置距离之offset()和position()的区别(二)
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- Ajax 请求头中常见content-type
四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- JS:JS中常见的 “函数名 is not a function” 错误
js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...
- JS中常见设计模式总结
github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...
- js从数组中删除指定值(不是指定位置)的元素
RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...
随机推荐
- mysql密码过期的修改方法(your password has expired)
今天打开SQLyog提示密码过期:Your password has expired 解决方法: 1. 启动MySQL服务 2. 启动MySQL后台 3. 执行以下命令 step 1: S ...
- 2018.3.1 RF module distance test part II-
1 Test circuit diagram 2 Test demo 3 Test record 4 Test analysis 5 Test results and discussion E ...
- linux安装与卸载软件
在ubuntu系统中,通常使用apt-get命令完成对软件的安装与卸载 安装的软件通常都放置在一些源中,国内有很多镜像源供下载使用,而系统设置的源保存在目录/etc/apt/sources.list文 ...
- leetcode 110 Balanced Binary Tree(DFS)
Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...
- struct tm 和 time_t 时间和日期的使用方法(转
关键字:UTC(世界标准时间),Calendar Time(日历时间),epoch(时间点),clock tick(时钟计时单元) .概念 在C/C++中,对字符串的操作有很多值得注意的问题,同样,C ...
- SoundHound Inc. Programming Contest 2018
A - F Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement You are give ...
- 「HNOI2008」「LuoguP3197」越狱(数论
题目描述 原题来自:HNOI 2008 监狱有连续编号为 111 到 nnn 的 nnn 个房间,每个房间关押一个犯人.有 mmm 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人信仰的宗教相同, ...
- 洛谷【P2664】树上游戏
浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.luogu.org/problemnew/show/P266 ...
- JavaScript高级程序设计学习笔记第九章--客户端检测
1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同, ...
- Ubuntu 12.04搭建hadoop单机版环境
前言: 本文章是转载的,自己又加上了一些自己的笔记整理的 详细地址请查看Ubuntu 12.04搭建hadoop单机版环境 Hadoop的三种运行模式 独立模式:无需任何守护进程,所有程序都在单个JV ...