Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小
在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置
首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范
偏移量
偏移量及元素在页面中的位置
要获取元素的偏移量和下方五个属性有关:
- offsetHeight:元素的高度(包含元素的外边框及水平滚动条)
- offsetWidth:元素的宽度(包含元素的外边框及垂直滚动条)
- offsetTop:元素的上边框到包含当前元素的元素的内上边框的距离
- offsetLeft:元素的左边框到包含当前元素的元素的内左边框的距离
- offsetParent:指向包含当元素的元素
如下图所示:
所以通过以上属性,我们如果需要获取元素在页面上的偏移
则可以通过以下代码来实现:
获取水平偏移
function getElementOffsetLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent; while(current !=== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
获取竖直偏移
function getElementOffsetTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent; while(current !=== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
客户区大小
元素的客户区大小值得是元素内容以及其内边距所占空间的大小
也就是元素边框以内的部分(不含边框)
即元素 content 和 padding部分的大小,所以不包含滚动条部分
关于客户区域的大小有 以下两个属性可以获取相关信息:
- clientWidth:客户区域的宽度
- clinetHeight:客户区域的高度
我们可以利用上述属性来获取浏览器的视口大小,如下方代码所示:
function getViewport(){
if(document.compatMode ==="BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}else{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
滚动大小
滚动大小指的是包含滚动内容的元素大小
与元素滚动大小有关的有四个属性:
- scrollHeight:在没有滚动条的情况下,元素内容的总高度
- scrollWidth:在没有滚动条的情况下,元素内容总宽度
- scrollTop:隐藏在元素内容区域上方的像素数
- scrollLeft:隐藏在元素内容区域左侧的像素数
对于不包含滚动条的元素,scrollHeight、scrollWidth与clientHeight、clientWidth的关系并不明朗
而且以 document.documentElement 为基准,不同浏览器之间的实现存在着差异
为了保证在跨浏览器环境下取得一致的值,最好取两者中的最大值作为精确结果
如下代码所示:
var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth); var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
而srollTop、scrollHeight通常用于确定元素是否滚动
以及通过操作这两个属性可以让元素滚动到指定位置
确定元素大小
浏览器厂商为每个元素都提供了一个 getBoundingClientRect()方法
该方法会返回一个矩形对象,用于给出元素的大小以及相对位置
该方法的跨浏览器通用写法如下:
function getBounding(ele) {// 跨浏览器获取元素大小
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if(ele.getBoundingClientRect){
if(typeof getBounding.offset !== "number"){
var temp = document.createElement("div"); // 修正起点坐标
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
getBounding.offset = -temp.getBoundingClientRect().top-scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = ele.getBoundingClientRect();
var offset = getBounding.offset;
return {
left:rect.left + offset,
right:rect.right + offset,
top:rect.top + offset,
bottom:rect.bottom + offset
};
}else{
var actualLeft = getElementLeft(ele);// 该函数在元素偏移部分
var actualTop = getElementTop(ele);// 该函数在元素偏移部分
getElementLeft = null;
getElementTop = null; return {
left: actualLeft - scrollLeft,
right: actualLeft + ele.offsetWidth - scrollLeft,
top:actualTop - scrollTop,
bottom:actualTop + ele.offsetHeight - scrollTop
}
}
}
}
Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小的更多相关文章
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- 《JavaScript高级程序设计》笔记:DOM2和DOM3(十二)
DOM1级主要定义的是HTML和XML文档的底层结构.DOM2级和DOM3级在这个结构基础上引入了更多的交互能力,也支持更高级的XML特性.为此DOM2级和DOM3级分为了很多的模块(模块直接具有某种 ...
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
- Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式
样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...
- Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围
虽然IE9支持了DOM范围,但是IE8及更早版本并不支持DOM范围 所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用 也就是 文本范围 var range = document.body ...
- Javascript高级编程学习笔记(55)—— DOM2和DOM3(7)操作范围
操作范围中的内容 在创建范围时,内部会为这个范围创建一个文档片段 范围所属的全部节点都会被添加到这个片段中 虽然选取范围可以不是完整的.良好的DOM结构 但是在这个为范围创建的文档片段中,会自己完缺少 ...
- Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表 在JS中样式表用一种类型来表示,以便我们在JS对其进行操作 这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表 其中 ...
随机推荐
- .gitinore配置失效问题
问题:在.gitinore中配置忽略项,配置失效 原因:新增加忽略项已经提交过,在暂存区或分支上被版本控制 解决:删除暂存区或分支上的文件(本地需要使用, 只是不希望这个文件被版本控制), 可以使用 ...
- vue动态绑定background:url绑不上的问题
场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...
- MySQL千万级数据库查询怎么提高查询效率
在实际项目中,当MySQL表的数据达到百万级别时候,普通查询效率直线下降,而且当使用的where条件较多,其查询效率是让人无法容忍的.假如一个taobao订单查询详情要几十秒,可想而知的用户体验是多差 ...
- g++ 学习笔记
gcc and g++分别是GNU的c & c++编译器.gcc/g++在执行编译的时候一般有下面4步: 1 预处理,生成.i的文件. 命令如下:g++ -E test.cpp 此命令只进行 ...
- AX2009 批处理作业中使用多线程---独立任务模式
每个工单独立一个任务. Class /* 独立任务模式 */ class DemoBatchIndividualTasks extends RunBaseBatch { str 20 SalesOrd ...
- txt 修改
[61TECH_HEIBAILIUYI]#gaIcldGcyd7ducFc3deaRaOdAd4dPdMdaenc1chaeedeGcfcfeyd1cedhbidIcXcIdBdbdvdfcvbjdr ...
- layer.tips属性
layer.tips(新加的内容,'选择节点',{time: 0, area: ['20%', '20%'], skin: 'layui-layer-rim', tips: [3, '#ffffff' ...
- BSOJ3760||洛谷P1453 城市环路 题解
城市环路 Description 一座城市,往往会被人们划分为几个区域,例如住宅区.商业区.工业区等等.B市就被分为了以下的两个区域——城市中心和城市郊区.在着这两个区域的中间是一条围绕B市的环路,环 ...
- S系统的不好的实践
多个项目 多个分支放在一个SVN里边维护,导致多股力量并行开发时候的代码覆盖的风险可能性很大,, 好的实践是维护独立的SVN,彼此分离开来
- Django forms表单 select下拉框的传值
今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...