【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 像素坐标(亦即相对于当前窗口)。
【client】与【offset】的更多相关文章
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- scroll、client和offset的区别
scroll.client和offset的区别:http://www.cnblogs.com/pcd12321/p/4448420.html
- 前端 ---client、offset、scroll系列
client.offset.scroll系列 1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 4.client、offset、scroll系列
client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...
- 差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
- client、offset、scroll
1. client 客户区大小 1.1. clientHeight和clientWidth element.clientHeight表示元素可视区域的高度,包括可视区域中元素的 CSS height+ ...
- DOM盒子模型常用属性client,offset和scroll
JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...
随机推荐
- 四步走查智能硬件异常Case
此文已由作者于真真授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 相比于软件,智能硬件产品由于涉及硬件和软件两个端的状态,其异常case要更加错综复杂.由于硬件产品的迭代更新 ...
- POJO 与 JavaBean 的区别 !
$说明: POJO :全称(Plain Old Java Object)翻译为“普通旧Java对象” 通俗理解为“一个简单的java对象”. JavaBean: 是一种JAVA语言写成的可重用组件,是 ...
- win10下安装配置mysql-8.0.13--实战可用
1.下载mysql-8.0.13安装包 1 https://dev.mysql.com/downloads/mysql/ 选择zip安装包下载就好. 2.解压到你要安装的目录 3.创建my.ini配置 ...
- MongoDB初识篇
前言 一直听说MongonDB,却没有机会接触它,于是决定先从表面上认识它.MongoDB(分布式文档存储数据库)是一种介于关系型数据库和非关系型数据库之间的数据库,而且它是非关系数据库中最像关系型数 ...
- asp web.config文件里compilation的assemblies add的元素来自哪里
该程序集组合由版本.区域性和公钥标记组成. ASP.NET 首先在应用程序的专用 Bin 目录中搜索程序集 DLL,然后在系统程序集缓存中搜索程序集 DLL. add 元素添加要在动态资源编译期间使用 ...
- 前端开发快速定位bug的一些小技巧
1,根据报错信息定位: (1) Uncaught TypeError: Cannot read property 'attr' of undefined; 此类型为变量或者对象属性未定义类型. (2) ...
- docker容器时间不对及java程序时间不对解决
使用docker容器部署的应用,会出现时间与主机不一致的情况 1. 容器时间与主机差8个小时:主机的与容器的/etc/localtime不一致 解决方法:挂载主机的/etc/localtime,如果没 ...
- SprimgMVC学习笔记(七)—— 上传图片
一.配置虚拟目录 在tomcat上配置图片虚拟目录,在tomcat下conf/server.xml中添加: <Context docBase="D:\upload\temp" ...
- 【笔记】MySQL学习之索引
[笔记]MySQL学习之索引 一 索引简单介绍 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可. 普通 ...
- Luogu P1120 小木棍 [数据加强版] 来来来我们一起来剪枝,剪枝,剪枝、、、
好啊...太棒了... dfs(拼到第几根木棍,这根木棍剩余长度,上一根木棍的位置) len是木棍的长度,cnt是木棍的个数 震撼人心的剪枝: 1.枚举长度从最大的木棍开始,直到sum/2,因为之后只 ...