【浏览器】document.documentElement.clientWidth/clientHeight 视口Viewport宽高(CSS像素)

最新推荐文章于 2024-08-20 10:41:40 发布
原创 最新推荐文章于 2024-08-20 10:41:40 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了在浏览器中通过document.documentElement.clientWidth/clientHeight获取视口Viewport高宽的方法，单位为CSS像素，这在前端页面布局等方面有重要作用。
          
document.documentElement.clientWidth
ssisse的博客
05-14 7179
关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight; s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动
[js] 浏览器宽度 documentElement.clientWidth window.innerWidth
qq_14993591的博客
09-07 651
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 // 浏览器大小改变事件 window.addEventListener( 'resize' , function(){ // 不包含浏览器滚动条宽度 var width1 = document
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
ie获得document.documentElement.clientWidth为0
fyddaben的专栏
03-28 947
一个document.documentElement.clientWidth为0的问题 关于获取各种浏览器可见窗口大小的一点点研究 转载自：http://developer.51cto.com/art/200805/72909.htm function getInfo() { var s = ""; s = " 网页可见区域宽：" document.body.cli
客户区client、视口尺寸
雷雨天的雷胖子
04-26 519
目录 一、客户区client 概述 clientHeight clientWidth clientLeft clientTop 二、视口尺寸 标准视口属性 兼容低版本ie 标准模式下的兼容 怪异模式下的兼容 封装兼容性方法返回浏览器的视口尺寸 一、客户区client 概述 客户区client是指dom元素的内容及其内边距所占据的空间大小。 clientHeigh...
<div class="image-container" @click="handelAi" @mouseenter="currentImg = hoverImg" @mouseleave="showDefaultImg" @mousedown="startDrag" :style="containerStyle" > <img :src="currentImg" alt="切换图片" class="ratio-img"> </div> handelAi(){ ticket().then(res=>{ window.open(res.url) }) } , setInitialPosition() { // 获取容器DOM元素 // 1. 获取视口宽高（不含滚动条） const viewportWidth = document.documentElement.clientWidth; const viewportHeight = document.documentElement.clientHeight; // // 4. 计算初始left和top，实现右下角定位 this.containerLeft = viewportWidth - 400; this.containerTop = viewportHeight - 500; }, startDrag(e) { // 阻止默认行为（避免拖动时选中文本） e.preventDefault(); // 标记开始拖动 this.isDragging = true; // 记录鼠标按下时的坐标（相对于浏览器窗口） this.startX = e.clientX; this.startY = e.clientY; // 记录容器当前的left和top（初始位置，后续拖动基于此计算偏移） this.initialLeft = this.containerLeft; this.initialTop = this.containerTop; // 绑定鼠标移动和松开事件（监听document，避免鼠标移出容器后失效） document.addEventListener('mousemove', this.handleDrag); document.addEventListener('mouseup', this.endDrag); }, // 2. 鼠标移动：计算拖动距离，更新容器位置 handleDrag(e) { if (!this.isDragging) return; // 未拖动时不执行 // 计算鼠标移动的偏移量（当前位置 - 初始位置） const offsetX = e.clientX - this.startX; const offsetY = e.clientY - this.startY; // 更新容器位置（初始位置 + 偏移量） this.containerLeft = this.initialLeft + offsetX; this.containerTop = this.initialTop + offsetY; }, // 3. 鼠标松开：结束拖动，移除事件监听 endDrag() { this.isDragging = false; // 移除document上的事件监听（避免内存泄漏） document.removeEventListener('mousemove', this.handleDrag); document.removeEventListener('mouseup', this.endDrag); }, 我拖动后 会触发点击事件怎么解决冲突
最新发布
10-21
我们参考了多个引用，其中引用[2]、[3]、[4]提供了解决思路。... 解决方案概述： 1. 在拖拽开始（mousedown）时记录时间，并设置一个标志（如isDrag）为false。 2. 在拖拽移动（mousemove）过程中，如果移动距离超过...
<script> // 获取浏览器初始宽度 const initialWidth = document.documentElement.clientWidth + 'px'; // 设置 CSS 变量以确保宽度固定 document.documentElement.style.setProperty('--initialWidth', initialWidth); // 禁止 div 随窗口大小改变而调整 window.onresize = function () { // 不做任何操作，保持宽度不变 }; </script>修改如上代码，把宽度改为高度。
06-18
const initialHeight = document.documentElement.clientHeight + 'px'; document.documentElement.style.setProperty('--initialHeight', initialHeight); ``` #### 3. 禁止窗口调整时高度变化 为了防止窗口调整时...
viewport：获取浏览器视口宽高的实用工具
进一步分析其 API 设计，`viewport.width()` 和 `viewport.height()` 方法返回的是实时的数值（单位为像素），适合在窗口 resize 事件监听器中频繁调用以动态调整 UI 元素。相比直接操作全局变量或重复编写 DOM 查询...
补环境 document.documentElement怎么补
06-13
viewport_size = driver.execute_script("return { width: window.innerWidth || document.documentElement.clientWidth, height: window.innerHeight || document.documentElement.clientHeight };") print(f...
JavaScript获取多浏览器窗口宽高值的方法
首先，JavaScript提供了多个属性用于获取浏览器窗口的尺寸信息，主要包括：`window.innerWidth` 和 `window.innerHeight`、`document.documentElement.clientWidth/clientHeight`、`document.body.clientWidth/...
document.body.clientHeight 和 document.documentElement.clientHeight的区别
ajpr3120的博客
03-25 129
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度 转载于:https...
详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth
qq_47443027的博客
11-25 3717
3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）
rem
weixin_30656145的博客
10-09 204
基准值：可以看到，无论页面以哪种手机比例缩放，body的width都是7.5rem。很明显，目前网易的手机端设计稿是基于iPhone6，750（设计师给的设计稿是物理分辨率，会是我们写样式的逻辑分辨率的两倍，如果给的设计稿是640，那么是基于iPhone5，320），且基准值是100px（750/7.5=100）。这个基准值很关键，后面的css换算，都和这个基准值有关。动态font-size：...
详解clientWidth，scrollWidth，offsetWidth，innerWidth
weixin_45096939的博客
10-26 4391
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。scrollHeight和scrollWidth还可以获取Dom元素中内容实际占用的高度和宽度.scrollLeft后面的值必须是number类型，表示的是滚动左侧隐藏的部分。clientWidth也可以用来获取元素的宽高，不包含元素的border.offset用来获取DOM元素中内容高度和宽度时包括元素的border.window.innerHeight=浏览器窗口的内部高度。
同样是获取页面窗口的大小：innerWidth和document.documentElement.clientWidth的区别
YY的博客
10-20 684
innerWidth和document.documentElement.clientWidth的区别
网页中宽度、高度及各种长度详解
m0_67793437的博客
08-20 1511
在网页开发中，DOM 元素的尺寸不仅包括宽度和高度，还包括各种与元素位置、偏移和滚动相关的长度属性。本文将详细介绍 DOM 中与宽度、高度及各种长度相关的属性和方法，并介绍如何在网页布局中有效使用这些属性。
document.documentElement.clientwidth和document.body
weixin_33847182的博客
09-15 3119
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript基础学习系列一百八十三：窗口大小
m0_68635815的博客
02-29 461
在其他移动浏览器中，document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上 页面可视区域的大小。与移动窗口的方法一样，缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。同样，缩放窗口的方法只能应用到最上层的 window 对象。
javascript基础学习系列三百八十八：窗口大小
m0_68635815的博客
03-14 788
在其他移动浏览器中，document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上页面可视区域的大小。这 3 个方法都接收表示相对视口距离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值