dom获取设备的宽高

//一.获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。
 1 document.body.clientWidth ==> BODY对象宽度
 2 document.body.clientHeight ==> BODY对象高度
 3 document.documentElement.clientWidth ==> 可见区域宽度
 4 document.documentElement.clientHeight ==> 可见区域高度
 5 document.body.clientWidth ==> 网页可见区域宽 
 6 document.body.clientHeight ==> 网页可见区域高
 7 document.body.offsetWidth ==> 网页可见区域宽(包括边线的宽)
 8 document.body.offsetHeight ==> 网页可见区域高(包括边线的高)
9 document.body.scrollWidth ==> 网页正文全文宽document.body.scrollHeight ==> 网页正文全文高
10 document.body.scrollTop ==> 网页被卷去的高
11 document.body.scrollLeft ==> 网页被卷去的左
12 window.screenTop ==> 网页正文部分上
13 window.screenLeft ==> 网页正文部分左
14 window.screen.height ==> 屏幕分辨率的高
15 window.screen.width ==> 屏幕可用工作区高度
16 window.screen.availHeight ==> 屏幕可用工作区高度
17 window.screen.availWidth ==> 屏幕可用工作区宽度

//二.部分jquery函数获取方法
1 // 部分jQuery函数  
2 $(window).height()                //浏览器时下窗口可视区域高度   
3 $(document).height()            //浏览器时下窗口文档的高度   
4 $(document.body).height()      //浏览器时下窗口文档body的高度   
5 $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin   
6 $(window).width()     //浏览器时下窗口可视区域宽度   
7 $(document).width()   //浏览器时下窗口文档对于象宽度   
8 $(document.body).width()      //浏览器时下窗口文档body的高度   
9 $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding  .
 1 HTML精确定位:  scrollLeft,scrollWidth,clientWidth,offsetWidth   
 2 scrollHeight: 获取对象的滚动高度。   
 3 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
 4 scrollTop:  设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
 5 scrollWidth: 获取对象的滚动宽度   
 6 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度   
 7 offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置   
 8 offsetTop:  获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
 9 event.clientX 相对文档的水平座标   
10 event.clientY 相对文档的垂直座标   
11 event.offsetX 相对容器的水平坐标   
12 event.offsetY 相对容器的垂直坐标   
13 document.documentElement.scrollTop 垂直方向滚动的值   
14 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 
### 如何在 Vue.js 中动态获取图片的 #### 使用 `ref` 和 DOM 方法获取图片原始尺寸 在 Vue 3 的组合式 API 中,可以通过模板引用 (`ref`) 来访问 DOM 节点。对于图片元素,可以利用其属性 `naturalWidth` 和 `naturalHeight` 获取图像的原始分辨率。以下是具体实现方式: ```javascript <template> <img ref="imageRef" src="/path/to/image.jpg" alt="example"> </template> <script setup> import { ref, onMounted } from 'vue'; const imageRef = ref(null); const originalWidth = ref(0); const originalHeight = ref(0); onMounted(() => { if (imageRef.value) { originalWidth.value = imageRef.value.naturalWidth; // 原始度 [^1] originalHeight.value = imageRef.value.naturalHeight; // 原始度 [^1] } }); </script> ``` 上述代码展示了如何通过 `ref` 访问图片节点,并读取它的自然尺寸。 --- #### 动态计算图片显示尺寸 当图片被缩放到容器内时,实际展示的可能不同于原始尺寸。此时可通过 `offsetWidth` 和 `offsetHeight` 属性来获取当前渲染后的尺寸。 ```javascript const displayWidth = ref(0); const displayHeight = ref(0); onMounted(() => { if (imageRef.value) { displayWidth.value = imageRef.value.offsetWidth; // 显示度 displayHeight.value = imageRef.value.offsetHeight; // 显示度 } }); ``` 此方法适用于需要了解图片在页面上的最终呈现效果的情况。 --- #### 移动端适配下的 px 到 rem 转换 如果目标是在移动端开发中支持响应式设计,则需考虑将像素单位转换为相对单位(如 `rem`)。这通常涉及根字体大小的设置以及动态计算逻辑。 假设已知屏幕度和期望的比例关系,可按如下公式完成转换: \[ \text{根字体大小}(\text{px}) = \frac{\text{元素度}(\text{rem})}{\text{屏幕度}(\text{px})} [\]^2] 例如,在 CSS 文件中定义基础比例: ```css html { font-size: calc(100vw / 7.5); /* 设定每份 rem 对应的实际物理度 */ } ``` 随后可以在 JavaScript 中进一步操作这些值以适应不同设备的需求。 --- #### 插件扩展:动态调整与增强功能 某些场景下仅获取不足以满足需求,比如希望加入旋转或其他交互行为。基于现有组件库(如 vue-preview),能够自定义修改源码或者封装新工具函数达成目的[^4]。 下面是一个简单的例子用于演示如何加载外部资源并解析其维度信息: ```javascript function getImgNaturalDimensions(imgSrc, callback) { const img = new Image(); img.src = imgSrc; img.onload = () => { callback({ width: img.width, height: img.height }); // 自然尺寸回调 [^3] }; } // Usage Example getImgNaturalDimensions('/path/to/image.jpg', dimensions => console.log(dimensions)); ``` 这种方法特别适合异步加载远程文件的情形。 --- ### 总结 综上所述,无论是直接操纵 DOM 元素还是借助第三方解决方案,都可以灵活应对各种复杂的业务挑战。关键是理解底层原理并与框架特性紧密结合起来加以运用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值