关于offsetTop和clientX和pageX的区别

绝地灬酷狼 2022-05-08 02:46 146阅读 0赞

$('.con').offset().top;//jq中offset（）是相对于视口

var con = document.getElementsByClassName('con')\[0\];

// console.log(con.offsetTop);//原生JS中若父级有定位，则相对与父级，若父级无定位，则相对于视口

// console.log(con.offsetWidth);//原生JS中offsetWidth是该元素的content + padding + border

// console.log(con.style.width);//原生JS只能获取该元素的行间样式的width值，若引入css样式则无法获取width值，而且设置的值也只是设置在行间样式上

// console.log(con.clientWidth);//原生JS中clientWidth = content + padding值之和，同理cilentHeight

// con.addEventListener('mouseenter', function(e) \{

// // console.log(e.clientX); 返回当前鼠标点击点的坐标，相对于视口的坐标

// console.log(e.clientX)//相对于文档的点击坐标

// console.log(e.offsetX);//相对于父元素的点击坐标

// \}, false)

console.log(con.clientTop);//clientTop查看的是当前元素的额border像素值

console.log(con.clientLeft)//同理 查看当前元素的border像素值

pageX() 属性是鼠标指针的位置，相对于文档的左边缘。同理pageY也是相对于文档的位置

scrollWidth:获取对象的滚动宽度   
scrollHeight: 获取对象的滚动高度。   
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

//innerHeight获取或者设置元素内视口的高度 同理innerWidth

// $('.footer').innerHeight()//获取的值是content+padding的值

// $('.footer').innerHeight(200);//设置的值是content + padding的值

//outerWidth 设置或者获取元素外视口的宽度 同理outerHeight

$('.footer').outerWidth();//获取的值为content+padding + border的值

$('.footer').outerWidth(200);//设置的值为content+padding+border的总和值$('.footer').outerHeight(true);//获取的值为content+padding+border+margin的值

$('.footer').outerHeight(300,true);//设置的值为content+padding+border+margin的值的总合

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格，轻松区别 [JavaScript][] Event 对象中的offsetX, clientX, pageX, screenX, layerX, x

亦凉/ 2023年07月06日 08:57/ 0 赞/ 17 阅读

相关图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

逃离我推掉我的手/ 2022年12月17日 08:54/ 0 赞/ 81 阅读

相关 pageX,clientX,offsetX,layerX的区别

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>\_< John Resig大神说过

太过爱你忘了你带给我的痛/ 2022年07月10日 14:58/ 0 赞/ 132 阅读

相关一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)

水深无声/ 2022年06月15日 03:50/ 0 赞/ 119 阅读

相关 clientX、pageX、screenX、offsetX、layerX的区别

screenX，screenY：鼠标相对于用户显示器屏幕左上角的坐标； pageX，pageY：鼠标相对于文档左上角的坐标， pageY=clie

朱雀/ 2022年05月25日 00:16/ 0 赞/ 366 阅读

相关事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别

事件对象它是系统传给我们的一个对象,触发DOM上的某个事件时，会产生一个事件对象event，事件对象里面包括很多方法和属性，鼠标和键盘等等事件触发的内容都不一样事件对象有兼

ゝ一纸荒年。/ 2022年05月16日 01:20/ 0 赞/ 188 阅读

相关关于offsetTop和clientX和pageX的区别

$('.con').offset().top;//jq中offset（）是相对于视口 var con = document.getElementsByClassName('c

绝地灬酷狼/ 2022年05月08日 02:46/ 0 赞/ 147 阅读

相关鼠标的坐标属性,pageX,clientX,offsetX,screenX

//pageX //pageY //clientX //clientY //offsetX //offsetY

偏执的太偏执、/ 2021年12月12日 11:19/ 0 赞/ 171 阅读

相关轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

event.clientX、event.clientY 鼠标相对浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了

今天药忘吃喽~/ 2021年12月10日 13:47/ 0 赞/ 194 阅读

相关 javascript 图解 event对象offsetX, clientX, pageX, screenX, layerX, x区别

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.所以必然是“鼠标事件”发生时候才会有意

左手的ㄟ右手/ 2021年11月09日 18:20/ 0 赞/ 260 阅读