首页 > 编程笔记 > JavaScript笔记
JS获取元素的宽度和高度
在 JavaScript 中,使用元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的包含边框的宽度和高度;而 clientWidth 和 clientHeight 属性则可以分别获取元素的不包含边框的宽度和高度。
这些属性值包含的内容如下:
在实际应用中,经常需要让一个元素在视窗中居中显示,此时需要确定元素的定位 left 和 top 属性值,这两个值可使用下面的公式来确定:
其中,可视区域宽和高又可以使用以下格式的代码来获取:
元素在一个视窗中居中显示的具体代码请参见例 1。
【例 1】设置元素在视窗中居中显示。
图 1:元素在视窗中居中显示
这些属性值包含的内容如下:
- offsetWidth=左、右边框宽度+内容宽度+左、右内边距
- offsetHeight=上、下边框宽度+内容高度+上、下内边距
- clientWidth=内容宽度+左、右内边距
- clientHeight=内容高度+上、下内边距
在实际应用中,经常需要让一个元素在视窗中居中显示,此时需要确定元素的定位 left 和 top 属性值,这两个值可使用下面的公式来确定:
元素的 left=(可视区域宽-元素的宽)/2
元素的 top=(可视区域高-元素的高)/2
其中,可视区域宽和高又可以使用以下格式的代码来获取:
可视区域宽度=document.documentElement.clientWidth
可视区域高度=document.documentElement.clientHeight
元素在一个视窗中居中显示的具体代码请参见例 1。
【例 1】设置元素在视窗中居中显示。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置元素在视窗中居中显示</title> <style> #div1{width:100px;height:100px;background:red;border:10px solid #00BFFF; position:absolute;} </style> <body> <div id="div1"> <script> var oDiv = document.getElementById('div1'); var clientW = document.documentElement.clientWidth; var clientH = document.documentElement.clientHeight; var divW = oDiv.offsetWidth; var divH = oDiv.offsetHeight; oDiv.style.left = (clientW-divW)/2+'px'; oDiv.style.top = (clientH-divH)/2+'px'; </script> </body> </html>上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
图 1:元素在视窗中居中显示
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算