首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式
阅读:18
JS获取浏览器窗口大小
获取 <html> 标签的 clientWidth 和 clientHeight 属性,就可以知道浏览器窗口的可视宽度和高度,而 <html> 标签在脚本中表示为 document.documentElement。可以这样设计:
在怪异模式下,body 是最顶层的可视元素,而 html 元素保持隐藏,所以只有通过 <body> 标签的 clientWidth 和 clientHeight 属性才可以知道浏览器窗口的可视宽度和高度,而 <body> 标签在脚本中表示为 document.body。可以这样设计:
把上面两种方法兼容起来, 设计代码如下:
如果窗口包含内容超出了窗口可视区域,则应该使用 scrollWidth 和 scrollHeight 属性来获取窗口的实际宽度和高度。
对于 document.documentElement 和 document.body 来说,不同浏览器对它们的支持略有差异。例如:
var w = document.documentElement.clientWidth; //返回值不包含滚动条的宽度 var h = document.documentElement.clientHeight; //返回值不包含滚动条的宽度
在怪异模式下,body 是最顶层的可视元素,而 html 元素保持隐藏,所以只有通过 <body> 标签的 clientWidth 和 clientHeight 属性才可以知道浏览器窗口的可视宽度和高度,而 <body> 标签在脚本中表示为 document.body。可以这样设计:
var w = document.body.clientWidth; var h = document.body.clientHeight;
把上面两种方法兼容起来, 设计代码如下:
var w = document.documentElement.clientWidth || document.body.clientWidth; var h = document.documentElement.clientHeight || document.body.clientHeight;如果浏览器支持 documentElement,则使用 documentElement 对象读取;如果该对象不存在,则使用 body 对象读取。
如果窗口包含内容超出了窗口可视区域,则应该使用 scrollWidth 和 scrollHeight 属性来获取窗口的实际宽度和高度。
对于 document.documentElement 和 document.body 来说,不同浏览器对它们的支持略有差异。例如:
<body style="border : solid 2px blue; margin : 0; padding : 0"> <div style="width : 2000px; height : 1000px; border : solid 1px red;"> </div> </body> <script> var wb = document.body.scrollWidth; var hb = document.body.scrollHeight; var wh = document.documentElement.scrollWidth; var hh = document.documentElement.scrollHeight; </script>不同的浏览器使用 documentElement 对象获取浏览器窗口的实际尺寸是一致的,但是使用 body 对象来获取对应尺寸就会存在解析差异,在实际设计中应该考虑这个问题。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频