JS body.clientWidth,documentElement.clientWidth,clientX

最新推荐文章于 2021-11-06 11:35:45 发布
原创 最新推荐文章于 2021-11-06 11:35:45 发布 · 250 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Blog #HTML

本文详细解释了不同鼠标事件坐标系的概念，如event的x、clientX、offsetX、screenX等，并介绍了z-index属性的作用及如何获取浏览器视口的宽度和高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


event的x，clientX，offsetX，screenX

·         x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。

·         clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。

·         offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。

·         screenX:相对于用户屏幕。

·         z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

 

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

 

当页面上有DOCTYPE的时候,值为

document.body.clientHeight = 54px 
document.documentElement.clientHeight = 729px

当没有DOCTYPE时

document.body.clientHeight = 729px 
document.documentElement.clientHeight = 0px

可以看出，document.body.clientHeight 和 document.documentElement.clientHeight 的区别。

就是因为少了DOCTYPE 所以 document.documentElement.clientHeight 的值为0。而换成 document.body.clientHeight就好了

http://hi.baidu.com/ettazz/blog/item/f44685882c4fcbd8fc1f1078.html

vue pc移动两个html,vue一套代码适应移动端，pc端
weixin_28676973的博客
06-10 2161
一、使用场景：有适配pc端改为适配pc端和移动端，使用2套css代码实现App.vuecreated: function () {if(document.documentElement.clientWidth > 640){require('./style/index.：');this.plaform = 'pc';}else{require('./style/mobile.scss');t...
移动端页面布局：百分比布局、rem布局
Hyperyou的博客
08-01 7117
移动端页面布局：百分比布局、rem布局 1 弹性盒布局（百分比布局） 例如，拉勾网、天猫首页。 好处：充分发挥大手机的优势——显示内容越多；缺点：屏幕过大，间距过大，比例失调。 特点： - 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变； - 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。 2 rem布局（等比缩放布局） 例如，网
document.documentElement.clientWidth与document.body.clientWidth在浏览器滚动条的情况下，值是不一样的
踏雪听雨
06-09 5847
document.documentElement.clientWidth document.documentElement.clientHeight document.body.clientWidth document.body.clientHeight   body与documentElement这两个属性在浏览器的body设置成  时，得到的值是不同的。 当有overflow:hi
document.documentElement 和document.body 以及clientWidth
weixin_41201611的博客
12-27 1272
今天有用到这块的东西  在这里分享给小伙伴们 （原来HTML里是document.body  --XHTML里是document.documentElement ,都指的是节点(OR元素) ）   在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document .body.scrollTop等属性，
body.clientWidth
weixin_33856370的博客
11-08 203
Code <scripttype="text/javascript"> debugger; varMzElement={};//节选自jsframework MzElement.body=function() { varW,H,SL,ST...
document.documentElement.clientHeight和document.body.clientHeight区别
weixin_33834679的博客
04-12 3065
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 Document 对象 当浏览器载入HT...
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
zjlovety的专栏
07-28 3万+
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHei
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
document.body.scrollTop用法
12-16
- **document.body.clientWidth**: 表示网页可见区域的宽度（不包含滚动条）。 - **document.body.clientHeight**: 表示网页可见区域的高度（不包含滚动条）。 - **document.body.offsetWidth**: 包含边框在内的网页...
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
10-29
在JavaScript中，`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth` 等属性是处理元素尺寸和滚动位置的重要工具。这些属性各自代表着不同的意思，在实际开发中有着广泛的应用。 `scrollLeft` 属性用于...
javascript窗口宽高,鼠标位置,滚动高度(详细解析).docx
01-18
3. **`document.body.clientWidth` 和 `document.body.clientHeight`**： - 返回文档主体元素的可视区域宽度和高度。 - 当前页面没有滚动条时，返回的是实际内容的宽度和高度；如果页面有滚动条，则返回的值比实际...
js中的如何定位固定层的位置.docx
01-21
当需要定位鼠标相对于页面的绝对位置时，通常会使用`event.clientX + document.body.scrollLeft`和`event.clientY + document.body.scrollTop`。但需要注意的是，对于IE5.5及更高版本，需要特别处理`document.body....
解决js代码中 document.body.clientWidth 为0
Ctrl_kun的博客
11-06 941
在不同浏览器中获取方式不同(HTML5) chrome: document.documentElement.clientHeight IE: document.body.clientWidth html5中如果用错则为0 解决方法 将HTML5换成HTML4 用js分别获取两个值，取最大值 max(document.documentElement.clientHeight,document.body.clientWidth) ...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
热门推荐
qq_42089654的博客
05-30 12万+
首先定义一个div。 然后稍微装修一下 下面开始区分 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth =width+左右padding 2，clientHeigh的实际高度 clien...
event、HtmlElement、jquery的多种距离或宽度辨别
xiaozhuangyumaotao的博客
04-18 175
看到“event、HtmlElement、jquery的多种距离或宽度辨别”这个标题，大家想到的可能就是x、clientX、screenY、offsetY,亦或是scrollTop、clientLeft、clientTop又或者是width()、outerHeight(true)等函数，印象中就感觉那叫一个乱，称它叫做“乱花渐欲迷人眼”一点也不为过，咋整？还好，乐之者java在这里帮你轻松搞...
body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
dieying2398的博客
03-28 390
document.body.clientWidth获取body元素对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。 document.body.clientHeight获取body元素对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。 浏览器兼容性 在IE7中，如果给body设置滚动条的...
document.body.clientHeight 和 document.documentElement.clientHeight的区别
生存不忘生活
12-16 990
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代doc
获取浏览器高宽
weixin_30632883的博客
09-20 297
s = " 网页可见区域宽：" document.body.clientWidth;s = " 网页可见区域高：" document.body.clientHeight;s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"...
JavaScript全面解析：获取页面与屏幕尺寸方法
- `document.body.clientWidth`：返回不包括滚动条的页面宽度。 - `document.body.offsetWidth`：返回包括内边距和边框的页面宽度。 - `window.screen.width`：返回显示器屏幕的宽度。 2. 页面和屏幕高度： - `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值