DOM操作 三大家族
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
clientX,clientY 鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
---------------------
作者:xiaoyaoyunzi
来源:CSDN
原文:https://blog.csdn.net/xiaoyaoyunzi/article/details/8260206
版权声明:本文为博主原创文章,转载请附上博文链接!
DOM操作 三大家族的更多相关文章
- 迷你MVVM框架 avalonjs 沉思录 第2节 DOM操作的三大问题
jQuery之所以击败Prototype.js,是因为它自一开始就了解这三大问题,并提出完善的解决方案. 第一个问题,DOM什么时候可用.JS不像C那样有一个main函数,里面的逻辑不分主次.但JS是 ...
- client三大家族区别(三大家族总结)
目录 目录 2 今日内容: 4 第1章 第三大家族client 4 1.1 主要成员 4 1.2 三大家族区别(三大家族总结) 5 1.2.1 Width和height 5 1.2.2 top和lef ...
- HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- 6、网页制作Dreamweaver(HTML结构--dom操作)
一.基本语法:数据类型(字符串,小数,整数,布尔,时间) var, var s = "3.14"; var n = parseFloat(s); ; s += 5; var d = ...
- 课堂所讲整理:HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
- JavaScript的DOM操作(2)
补充: 回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
随机推荐
- 三、hexo+github搭建个人博客的主题配置
更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...
- W tensorflow/core/util/ctc/ctc_loss_calculator.cc:144] No valid path found 或 loss:inf的解决方案
基于Tensorflow和Keras实现端到端的不定长中文字符检测和识别(文本检测:CTPN,文本识别:DenseNet + CTC),在使用自己的数据训练这个模型的过程中,出现如下错误,由于问题已经 ...
- 大数据基础总结---MapReduce和YARN技术原理
Map Reduce和YARN技术原理 学习目标 熟悉MapReduce和YARN是什么 掌握MapReduce使用的场景及其原理 掌握MapReduce和YARN功能与架构 熟悉YARN的新特性 M ...
- tornado6与python3.7,异步新姿势
废话不多说,直接上代码 __auth__ = "aleimu" __doc__ = "学习tornado6.0+ 版本与python3.7+" import t ...
- Redis(四)Pub/Sub
发布与订阅 Pub/Sub模式应该非常熟悉,在现实应用中被广泛的使用.如:微博中关注某个号,这个号有发新博时,关注的都会收到:github上watch了某个项目,当有issue时,就会发邮件. Red ...
- git的本质是资源库和版本(资源)目录的维护过程
仓库的本质: 资源+索引. 对git而言,添加到暂存区的过程是,将单个资源的修改副本保存到资源库,同时维护暂存区目录的过程. git的本质是资源库和版本目录的维护过程. 一.要素 1.资源 2.副本 ...
- 【须弥SUMERU】分布式安全服务编排实践
一.概要 1.分布式安全服务编排概念 2.须弥(Sumeru)关键实现思路 3.应用场景 二.前言 在笔者看来,安全防御的本质之一是增加攻击者的攻击成本,尤其是时间成本.那么从防御的角度来说,如何尽早 ...
- window下使用curl操作elasticsearch
1.下载curlzip,https://curl.haxx.se/download.html; 2.解压,在bin文件夹中找到curl.exe,右键“以管理员身份运行”,cmd e: 换盘符:出现E: ...
- 阿里云监控RDS
RDS性能监控API https://help.aliyun.com/document_detail/26280.html?spm=a2c4g.11186623.6.1576.341d7159uzLD ...
- Laravel集合的简单理解
本篇文章给大家带来的内容是关于Laravel集合的简单理解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 集合通过 Illuminate\Database\Eloquent\C ...