offsetwidth offsethight的用法
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法
注意: 下面元素属性和元素方法都通过 elem.属性
或 elem.方法
的方式使用,window属性通过 window.属性
的方式使用,document属性则通过document调用。
- clientX /clientY 光标相对于浏览器可视区域的位置,也就是浏览器坐标。
- screenX/screenY 光标指针相对于电脑屏幕的水平/垂直坐标。
- pageX/pageY:鼠标相对于文档的位置
- 包括滚动条滚动的距离,即:clientX+window.scrollX
- IE8-不支持
- offsetX,offsetY: 光标相对于事件源对象的相对偏移量。
- 事件源对象:触发事件的对象
<script>
/*
****** 元素视图属性
* offsetWidth 水平方向 width + 左右padding + 左右border-width
* offsetHeight 垂直方向 height + 上下padding + 上下border-width
*
* clientWidth 水平方向 width + 左右padding
* clientHeight 垂直方向 height + 上下padding
*
* offsetTop 获取当前元素到 定位父节点 的top方向的距离
* offsetLeft 获取当前元素到 定位父节点 的left方向的距离
*
* scrollWidth 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth
* scrollHeight 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight
*
****** 元素视图属性结束
*
****** Window视图属性(低版本IE浏览器[<IE9]不支持) 【自测包含滚动条,但网络教程都说不包含???】
* innerWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏)
* innerHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏)
* ***** Window视图属性结束
*
****** Document文档视图
* (低版本IE的innerWidth、innerHeight的代替方案)
* document.documentElement.clientWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
* document.documentElement.clientHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
*
* document.documentElement.offsetHeight 获取整个文档的高度(包含body的margin)
* document.body.offsetHeight 获取整个文档的高度(不包含body的margin)
*
* document.documentElement.scrollTop 返回文档的滚动top方向的距离(当窗口发生滚动时值改变)
* document.documentElement.scrollLeft 返回文档的滚动left方向的距离(当窗口发生滚动时值改变)
****** Document文档视图结束
*
****** 元素方法
* 1. getBoundingClientRect() 获取元素到body
* bottom: 元素底边(包括border)到可视区最顶部的距离
* left: 元素最左边(不包括border)到可视区最左边的距离
* right: 元素最右边(包括border)到可视区最左边的距离
* top: 元素顶边(不包括border)到可视区最顶部的距离
* height: 元素的offsetHeight
* width: 元素的offsetWidth
* x: 元素左上角的x坐标
* y: 元素左上角的y坐标
*
原文地址:https://www.cnblogs.com/bear159412/p/11020715.html
- 关于自动化平台的动态菜单设计
- go语言网络编程之tcp
- 实现简单的http并发请求,支持:GET、POST、HEAD、PUT
- 【go语言】Goroutines 并发模式(一)
- 【go语言】Goroutines 并发模式(二)
- 从零开始搭建Nginx和Tomcat的web集群环境
- 【翻译】为什么 goroutine 的栈内存无穷大?
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇终结(第3子篇)
- goroutine背后的系统知识
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇(第2子篇)
- 2017最后一天的学习-TensorFlow
- 从PowerVM,KVM到Docker:存储池的配置与调优---第一篇(第1子篇)
- 36小时,造一个亚马逊无人商店 | 实战教程+代码
- 使用Echarts来实现数据可视化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法