走进javascript系列(十)-DOM位置大小
时间:2020-04-17
本文章向大家介绍走进javascript系列(十)-DOM位置大小,主要包括走进javascript系列(十)-DOM位置大小使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
DOM1 DOM2 DOM3
DOM1 定义了HTML 和 XML的底层结构
DOM2,DOM3 在此基础上引入了更多的交互能力, 也支持更高级的xml特性
主要包括 核心基础扩展、视图扩展、事件扩展、样式扩展、遍历和范围 、 更多HTML属性和方法
contentDocument || contentWindow.document
可以如下方式获取iframe的document对象
var iframe = document.getElementById('iframeid');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
元素位置
offsetTop, offsetLeft 偏移量
获取当前元素的offsetParent
offsetLeft是基于offsetParent的偏移量
如果offsetParent为body,即为在页面中的偏移量
如果需要获取元素在页面中的偏移量,需要往上offsetParent
HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table,td,th,body元素。
当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。offsetParent 很有用,因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
scrollLeft, scrollTop:所有像素数被隐藏掉了
元素大小
客户区大小
clientWidth, clientHeight : 内容区域+padding
滚动大小
scrollHeight, scrollWidth: 元素内容的总高度/总高度
scrollLeft, scrollTop:所有像素数被隐藏掉了
屏幕分辨率
window.screen.height; window.screen.width
原文地址:https://www.cnblogs.com/pengsn/p/12719843.html
- Pegasus间谍套件内部原理及流程剖析
- 用node.js实现ORM的一种思路
- iOS“远程越狱”间谍软件Pegasus技术分析
- 学习HTML5之表单
- 基于jQuery的ajax对WebApi和OData的封装我们还是先来看看要求在看看目标:思路封装方式
- js的动态加载、缓存、更新以及复用(四)
- ajax的再次封装!(改进版) —— new与不 new 有啥区别?
- ajax的再次封装!
- 【自然框架】js版的QuickPager分页控件 V2.0
- 你的SQL语句放在了哪里?
- oclhashcat:离线hash密码破解工具官方文档(中文版)
- 如何动态加载js?
- 【自然框架】数据访问之精雕细琢(一)存储过程的参数
- 100w条记录分页,可以有多快?—— DataReader分页与SQL语句分页的对比测试(在线演示)
- 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 数组属性和方法
- dotnet 的 TaskCompletionSource 的 TrySetResult 是线程安全
- OpenCV 摄像头与视频读取并显示
- OpenCV 边缘检测
- Spring Boot 集成 WebSocket 实现服务端推送消息到客户端
- OpenCV 绘制图形
- OpenCV 图片缩放
- AI树莓派——构建树莓派大脑(NCNN环境搭建)
- PC人脸识别登录,出乎意料的简单
- TensorLayer学习之简介与安装
- JVM系列之:String.intern的性能
- 神经网络架构搜索——可微分搜索(DARTS)
- 神经网络架构搜索——可微分搜索(P-DARTS)
- 神经网络架构搜索——可微分搜索(PC-DARTS)
- 反编译小程序记录
- 使用Selenium WebDriver,Python和Chrome编写您的第一个Web测试