关于js里面的一些距离和宽高
来源:互联网 发布:公车管理系统源码 编辑:程序博客网 时间:2024/05/18 02:44
js中常用的获取距离以及宽高的方法
1.document.documentElement.clientWidth; //获取当前浏览器内容宽度,不包含菜单栏,滚动条,浏览器边框2.document.documentElement.clientHeight; //获取当前浏览器内容高度3.screen.width; //获取电脑屏幕的分辨率宽度(与浏览器宽高无关)4.screen.height; //获取电脑屏幕的分辨率高度(与浏览器宽高无关)5.document.body.scrollTop/document.documentElementscrollTop; //获取浏览器滚动条距离顶部的高度----------1.obj.clientWidth/obj.clientHeight; // 获取元素的内容以及padding值的和(width/height+padding)2.obj.offsetWidth/obj.offsetHeight; // 获取元素的内容+padding+margin的值的和(width/height+padding+margin)3.obj.offsetLeft/obj.offsetTop; // 获取元素到它定位父级的left/top值4.obj.scrollWidth/obj.scrollHeight; // 获取元素内部内容的滚动宽高;
关于常用的页面的宽高以及滚动高度;
1.document.documentElement.clientWidth; //获取当前浏览器内容宽度,不包含菜单栏,滚动条,浏览器边框
2.document.documentElement.clientHeight; //获取当前浏览器内容高度
3.window.innerWidth; //和document.documentElement.clientWidth的方法相同,但不兼容IE8及以下
4.screen.width; 获取电脑屏幕的分辨率宽度(与浏览器宽高无关)5.screen.height; 获取电脑屏幕的分辨率高度(与浏览器宽高无关)
6.获取浏览器滚动条距离顶部的高度:
有两种写法(1)document.body.scrollTop (2)document.documentElementscrollTop
这两种写法都可以获取到滚动条的高度,但是存在兼容性的问题,如下图
在webkit内核的浏览器中,document.documentElementscrollTop的获取方法是无效的,获取到的永远是0,同样的方法发现,document.body.scrollTop方法在IE浏览器中获取到的也是0,那么就要把两者结合起来,做到兼容:
alert(document.documentElementscrollTop||document.body.scrollTop)
这样写,当document.documentElementscrollTop的值为0的时候,会自动获取document.body.scrollTop的值,反过来也一样。
关于页面中div的宽高以及滚动高度;
1.obj.clientWidth/obj.clientHeight; 获取元素的内容以及padding值的和(width/height+padding)
2.obj.offsetWidth/obj.offsetHeight; 获取元素的内容+padding+margin的值的和(width/height+padding+margin)
3.obj.offsetLeft/obj.offsetTop; 获取元素到它定位父级的left/top值
4.obj.scrollWidth/obj.scrollHeight; 获取元素内部内容的滚动宽高;(1)。如第一张图,当div里面内容没有超出的时候,获取到的height值等于clientHeight的值;(2)。第二张图,当div里面的内容超出div的时候,实际内容的高度应该是大红框的高度,就算设置了overflow:hidden,获取到的值依旧是内容的实际高度。(3)。该方法在不同浏览器中都兼容,但是在不同浏览器中获取的值也不一样,会有误差,不过相对来说并不影响,因为实际操作中不同的值会有不同的操作方法
0 0
- 关于js里面的一些距离和宽高
- js和jq获取宽高上下距离的方法
- 关于js和jquery的一些问题
- 关于JS和浏览器的一些总结
- android 里面一些关于时间的组件
- 关于js里面的call方法
- 关于JS里面的变量提升
- js里面关于位置坐标的总结
- 关于js里面的变量范围
- js里面关于冒泡的处理方式
- JS中取得的关于窗口宽高和滚动值的属性列表
- js获取可视化区域的宽和高以及滑动条距离顶部的距离
- jquery 和 js的各种宽高
- js和JQuery的宽高理解
- 关于canvas宽高设置的一些整理
- android里面的一些属性和使用方法
- IE、火狐和谷歌关于一些JS的差异
- 关于JS中Apply和Call的一些理解
- maven 项目引用另一个maven项目生成的jar库(该库在本地maven库)
- TCP协议疑难杂症全景解析
- 机器学习实践:Multiple Features Of One Input
- 1048.Find Coins (25)
- Unity说明文档翻译-Importing Assets
- 关于js里面的一些距离和宽高
- OpenStack Identity service简介
- CSDN博客转载方法
- Linux命令中su与sudo的区别
- java 中常见的异常总结
- CSU-1009
- Project Euler 014 Longest Collatz sequence
- 解释执行与编译执行的区别
- RocketMQ多Master多Slave模式部署