【client】与【offset】
上面主要区分了【offset】和【client】开头的各个属性的意义,下面这张图是转载的,又加入了【scroll】开头的,和元素本身的【style】
clientWidth 是对象看到的宽度(不含border)
scrollWidth 是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离)。
offsetWidth 是指对象自身的宽度,整型,单位像素(含border,如滚动条的占用的宽,值会随着内容的输入而不断改变)。
好吧,第一张图看不清,我把代码贴下面了。
CSS代码
body { margin:10px; padding:10px; font-size:10px; }
div.v1 { margin:10px 30px; padding:20px; border:10px solid #000; border-left:20px solid red; }
div.v2 { margin:10px 30px; padding:20px; border:10px solid #000; border-left:15px solid green; }
p { margin:20px 50px; border:10px solid red; padding:20px; border-left:15px solid #F3F;}
JS代码
$(function(){
var oP=document.getElementById("replace");
var offsetWidth = oP.offsetWidth; // 当前对象 【content+padding+border】
var offsetHeight = oP.offsetHeight; // 怎么只有padding+border?
var clientWidth = oP.clientWidth; // 当前对象 【content+padding】
var clientHeight = oP.clientHeight; // 只有padding啦?
var offsetLeft = oP.offsetLeft; // 所有上级包括body的【padding-left、border-left、margin-left值】+【当前元素的margin-left值】 。我暂时理解为:当前元素从边框以外抵达窗口左边界的距离
var offsetTop = oP.offsetTop; // 暂时理解为当前对象从边框以外抵达窗口上边界的距离
// 以上这俩,FF有兼容问题,不会计算上body的border值
var clientLeft = oP.clientLeft; // 当前对象【border】宽度
var clientTop = oP.clientTop; // 当前对象【border】高度
$("#replace").text("offsetLeft: " + offsetLeft);
})
HTML结构
<div class="v1">
<div class="v2">
<p id="replace"></p>
</div>
</div>
追加点东西,在下面
易混淆点:
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
最新文章
- [Data Structure &; Algorithm] 七大查找算法
- 【Linux】文件特殊权限 SUID/SGID/Sticky Bit
- HDU 5092
- 在AE中通过指定中心点和半径画圆
- infusion度量金字塔数据解释
- Oracle登录时提示错误,导致用户无法登录
- JavaEE XML DOM解析
- Python3 从入门到出门
- 从零开始学习PYTHON3讲义(十二)画一颗心送给你
- C语言表达式和语句
- Web Storage和cookie
- SpringBoot-06:SpringBoot增删改查一套完整的考试案例
- es6的分析总结
- navicat for mysql cant connect to server 10038 远程连接出错
- npm发包注意
- list源码1(参考STL源码--侯捷):list节点、迭代器、数据结构
- html5-hgroup和address元素
- 荧光原位杂交技术 RNA-FiSH (fluorescence in situ hybridization)
- 安装Adobe Acrobat XI Pro
- jquery的json对象与字符串之间转换
热门文章
- scikit-learn 机器学习库
- iOS 12中无法获取WiFi的SSID了?
- TreeView —WPF—MVVM—HierarchicalDataTemplate
- luogu3327 [SDOI2015]约数个数和
- CentOS文件服务与数据管理
- node mysql问题:Client does not support authentication protocol requested by server; consider upgrading MySQL client!
- CF959D Mahmoud and Ehab and another array construction task 数学
- windows安装redis并设置别名
- spring boot 很好的文章
- 处女座和小姐姐(三)(数位dp)