整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
动距离
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性写法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;与 document.documentElement 属性不同的是, document.body 属性返回 <body> 元素, document.documentElement 属性返回 <html> 元素。
根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement chome object HTMLHtmlElement
document.body IE、FF object HTMLBodyElement
第一个属性可返回存在于XML以及HTML文档中的文档根节点(html标记)。
第二个属性是对HTML页面的特殊扩展,提供了对<body>标签的直接访问(body标记)。
窗口尺寸、工作区尺寸
可视区尺寸宽度
document.body.clientWidth IE、FF
document.documentElement.clientWidth chome
兼容性写法：
document.documentElement.clientWidth || document.body.clientWidth;可视区尺寸高度
document.body.clientHeight IE、FF
document.documentElement.clientHeight chome
兼容性写法：
document.documentElement.clientHeight || document.body.clientHeight;获取浏览器窗口水平滚动条的位置
document.body.scrollLeft;
document.documentElement.scrollLeft
兼容性写法：
document.documentElement.scrollLeft || document.body.scrollLeft;获取浏览器窗口垂直滚动条的位置
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性写法：
document.documentElement.scrollTop || document.body.scrollTop;注意：IE、FF已经支持documentElement对象的各种属性, 而
以上兼容性写法不影响所获的属性值
编写自定义函数：
// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}<!DOCTYPE HTML>声明对JavaScript获取窗口宽度和高度的影响
文来源于：程序员成长指北；作者：去伪存真
如有侵权，联系删除
最近在项目中要实现一个拖拽头像的移动效果，一直对JS Dom拖拽这一块不太熟悉，甚至在网上找一个示例，都看得云里雾里的，发现遇到最大的拦路虎就是JS Dom各种各样的距离，让人头晕眼花，看到一个距离属性，大脑中的印象极其模糊，如同有一团雾一样，不知其确切含义。果然是基础不牢，地动山摇。今天决心夯实一下基础，亲自动手验证一遍dom各种距离的含义。
下面我们进入正题, 笔者不善于画图, 主要是借助浏览器开发者工具，通过获取的数值给大家说明一下各种距离的区别。
本打算用截图软件丈量尺寸，结果发现截图软件显示的屏幕宽度与浏览器开发者工具获取的宽度不一致，这是为什么呢?
这是怎么回事？原来在PC端，也存在一个设备像素比的概念。它告诉浏览器一个css像素应该使用多少个物理像素来绘制。要说设备像素比，得先说一下像素和分辨率这两个概念。
设备像素比的定义是：
window.devicePixelRatio =显示设备物理像素分辨率显示设备CSS像素分辨率\frac{显示设备物理像素分辨率}{显示设备CSS像素分辨率}显示设备CSS像素分辨率显示设备物理像素分辨率
根据设备像素比的定义, 如果知道显示设备横向的css像素值，根据上面的公式，就能计算出显示设备横向的物理像素值。
显示设备宽度物理像素值 = window.screen.width * window.devicePixelRatio;设备像素比在我的笔记本电脑上显示的数值是1.25, 代表一个css逻辑像素对应着1.25个物理像素。
我前面的公式计算了一下，与截图软件显示的像素数值一致。这也反过来说明，截图软件显示的是物理像素值。
发现是由笔记本电脑屏幕的缩放设置决定的，如果设置成100%, 此时window.screen.width与笔记本电脑的显示器分辨率X轴方向的数值一致,都是1920(如右侧图所示), 此时屏幕上的字会变得比较小,比较伤视力。
逻辑像素是为了解决屏幕相同，分辨率不同的两台显示设备， 显示同一张图片大小明显不一致的问题。比如说两台笔记本都是15英寸的，一个分辨率是1920*1080,一个分辨率是960*540, 在1920*1080分辨率的设备上，每个格子比较小，在960*540分辨率的设备上，每个格子比较大。一张200*200的图片，在高分率的设备上看起来会比较小，在低分辨率的设备上，看起来会比较大。观感不好。为了使同样尺寸的图片，在两台屏幕尺寸一样大的设备上，显示尺寸看起来差不多一样大，发明了逻辑像素这个概念。
规定所有电子设备呈现的图片等资源尺寸统一用逻辑像素表示。然后在高分辨率设备上，提高devicePixelRatio, 比如说设置1920*1080设备的devicePixelRatio(dpr)等于2, 一个逻辑像素占用两个格子,在低分辨率设备上，比如说在960*540设备上设置dpr=1, 一个css逻辑像素占一个格子, 这样两张图片在同样的设备上尺寸大小就差不多了。通常设备上的逻辑像素是等于物理像素的，在高分辨率设备上，物理像素是大于逻辑像素数量的。由此也可以看出，物理像素一出厂就是固定的，而设备的逻辑像素会随着设备像素比设置的值不同而改变。但图片的逻辑像素值是不变的。
差别是很容易辨别的，如下图所示：
如下图所示，截图时在未把网页可视区域的滚动条高度计算在内的条件下, 截图工具显示的网页可视区域高度是168, 浏览器显示的网页可视区域的高度是167.5, 误差0.5，由于截图工具是手动截图，肯定有误差，结果表明，网页可视区域的高度 不包括滚动条高度。宽度同理。
屏幕宽高是个固定值，网页可视区域宽高会受到缩放窗口影响。
屏幕可用高度=屏幕高度-屏幕下方任务栏的高度，也就是：
window.screen.availHeight = window.screen.height - 系统任务栏高度scrollWidth(滚动宽度,包含滚动条的宽度)=scrollLeft(左边卷去的距离)+clientWidth(可见部分宽度);
// 同理
scrollHeight(滚动高度,包含滚动条的高度)=scrollTop(上边卷去的距离)+clientHeight(可见部分高度);需要注意的是，上面这三个属性，都取的是溢出元素的父级元素属性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父级元素是html(document.documentElement)。另外，
溢出元素的宽度(document.body.scrollWidth）=父级元素的宽度(document.documentElement.scrollWidth) - 滚动条的宽度(在谷歌浏览器上滚动条的宽度是19px)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>JS Dom各种距离</title>
<style>
html, body {
margin: 0;
}
body {
width: 110%;
border: 10px solid blue;
}
.rect {
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id="rect" class="rect"></div>
</body>
</html>
从下图可以看出:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>JS Dom各种距离</title>
<style>
div {
border: 1px solid #000;
width: 200px;
height: 600px;
padding: 10px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div class="rect"> 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
</body>
<script>
</script>
</html>
offsetWidth和clientWidth的共同点是都包括 自身宽度+padding , 不同点是offsetWidth包含border。
如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>JS Dom各种距离</title>
<style>
div {
border: 1px solid #000;
width: 200px;
height: 100px;
padding: 10px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>
</script>
</html>
代码如下，给rect元素添加一个mousedown事件，打印出事件源的各种位置值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>JS Dom各种距离</title>
<style>
html,
body {
margin: 0;
}
body {
width: 200px;
padding: 10px;
border: 10px solid blue;
}
.rect {
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id="rect" class="rect"></div>
</body>
<script>
const rectDom = document.querySelector('#rect');
rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY }) => {
console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
})
</script>
</html>
我们通过y轴方向的高度值,了解一下这几个属性的含义。 绿色块的高度是50px, 我们找个特殊的位置（绿色块的右小角）点击一下，如下图所示:
所以它们各自的含义,就很清楚了。
事件源属性 | 表示的距离 |
event.offsetX、event.offsetY | 鼠标相对于事件源元素（srcElement）的X,Y坐标， |
event.clientX、event.clientY | 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动偏移量。 |
event.pageX、event.pageY | 鼠标相对于文档坐标的x,y坐标，文档坐标系坐标 ＝ 视口坐标系坐标 ＋ 滚动的偏移量 |
event.screenX、event.screenY | 鼠标相对于用户显示器屏幕左上角的X,Y坐标 |
我们点击下图绿色块的右下角，把pageX和clientX值打印出来。如下图所示:
从下图可以看出，上下左右这四个属性，都是相对于浏览器可视区域左上角而言的。
从下图可以看出，当有滚动条出现的时候，right的值是359.6，而不是360+156(x轴的偏移量), 说明通过getBoundingClientRect获取的属性值是不计算滚动偏移量的，是相对浏览器可视区域而言的。
MouseEvent.movementX/movementX是一个相对偏移量。返回当前位置与上一个mousemove事件之间的水平/垂直距离。以当前位置为基准, 鼠标向左移动, movementX就是负值，向右移动，movementX就是正值。鼠标向上移动,movementY就是负值，向下移动，movementY就是正值。数值上，它们等于下面的计算公式。 这两个值在设置拖拽距离的时候高频使用，用起来很方便。
curEvent.movementX = curEvent.screenX - prevEvent.screenX;
curEvent.movementY = curEvent.screenY - prevEvent.screenY;mouse事件相对简单，只有mousedown(开始),mousemove(移动中),mouseup(结束)三种。与之对应的移动端事件是touch事件，也是三种touchstart(手指触摸屏幕), touchmove(手指在屏幕上移动), touchend(手指离开屏幕)。
相对而言, drag事件就要丰富一些。
事件名 | 触发时机 | 触发次数 |
dragstart | 拖拽开始时触发一次 | 1 |
drag | 拖拽开始后反复触发 | 多次 |
dragend | 拖拽结束后触发一次 | 1 |
事件名 | 触发时机 | 触发次数 |
dragenter | 被拖拽元素进入目标时触发一次 | 1 |
dragover | 被拖拽元素在目标容器范围内时反复触发 | 多次 |
drop | 被拖拽元素在目标容器内释放时(前提是设置了dropover事件) | 1 |
想要移动一个元素，该如何选择这两种事件类型呢？ 选择依据是:
类型 | 选择依据 |
mouse事件 | 1. 要求丝滑的拖拽体验 2. 无固定的拖拽区域 3. 无需传数据 |
drag事件 | 1. 拖拽区域有范围限制 2. 对拖拽流畅性要求不高 3. 拖拽时需要传数据 |
光说不练假把式, 扫清了学习障碍后，让我们自信满满地写一个兼容PC端和移动端的拖动效果。不积跬步无以至千里，幻想一口吃个胖子，是不现实的。这一点在股市上体现的淋漓尽致。都是有耐心的人赚急躁的人的钱。所以，要我们沉下心来，打牢基础，硬骨头啃一点就会少一点，步步为营，稳扎稳打，硬骨头也会被啃成渣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>移动小鸟</title>
<style>
body {
margin: 0;
font-size: 0;
position: relative;
height: 100vh;
}
.bird {
position: absolute;
width: 100px;
height: 100px;
cursor: grab;
z-index: 10;
}
</style>
</head>
<body>
<img class="bird" src="./bird.png" alt="" />
</body>
<script>
let evtName = getEventName();
// 鼠标指针相对于浏览器可视区域的偏移
let offsetX = 0, offsetY = 0;
// 限制图片可以X和Y轴可以移动的最大范围，防止溢出
let limitX = 0, limitY = 0;
// 确保图片加载完
window.onload = () => {
const bird = document.querySelector(".bird");
const { width, height } = bird;
limitX = document.documentElement.clientWidth - width;
limitY = document.documentElement.clientHeight - height;
bird.addEventListener(evtName.start, (event) => {
// 监听鼠标指针相对于可视窗口移动的距离
// 注意移动事件要绑定在document元素上，防止移动过快,位置丢失
document.addEventListener(evtName.move, moveAt);
});
// 鼠标指针停止移动时,释放document上绑定的移动事件
// 不然白白产生性能开销
document.addEventListener(evtName.end, () => {
document.removeEventListener(evtName.move, moveAt);
})
// 移动元素
function moveAt({ movementX, movementY }) {
const { offsetX, offsetY } = getSafeOffset({ movementX, movementY });
window.requestAnimationFrame(() => {
bird.style.cssText = `left:${offsetX}px;top:${offsetY}px;`;
});
};
};
// 获取安全的偏移距离
const getSafeOffset = ({ movementX, movementY }) => {
// //距上次鼠标位置的X,Y方向的偏移量
offsetX += movementX;
offsetY += movementY;
// 防止拖拽元素被甩出可视区域
if (offsetX > limitX) {
offsetX = limitX;
}
if (offsetX < 0) {
offsetX = 0;
}
if (offsetY > limitY) {
offsetY = limitY;
}
if (offsetY < 0) {
offsetY = 0;
}
// console.log({ movementX, movementY, offsetX, offsetY });
return { offsetX, offsetY };
}
// 区分是移动端还是PC端移动事件
function getEventName() {
if ("ontouchstart" in window) {
return {
start: "touchstart",
move: "touchmove",
end: "touchend",
};
} else {
return {
start: "pointerdown",
move: "pointermove",
end: "pointerup",
};
}
}
</script>
</html>
在chrome浏览器上发现一个奇怪的现象,设置的border值是整数，计算出来的值却带有小数
而当border值是4的整数倍的时候,计算值是正确的
看了这篇文章[5]解释说，浏览器可能只能渲染具有整数物理像素的border值，不是整数物理像素的值时，计算出的是近似border值。这个解释似乎讲得通，在设备像素比是window.devicePixelRatio=1.25的情况下, 1px对应的是1.25物理像素, 1.25*4的倍数才是整数，所以设置的逻辑像素是4的整数倍数，显示的渲染计算值与设置值一致,唯一让人不理解的地方，为什么padding,margin，width/height却不遵循同样的规则。
[1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink
[2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink
[3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink
[4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink
[5] https://www.w3.org/TR/CSS22/cascade.html#specified-value
通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。
示例代码如下：
<table border = "1" width = "100%" cellspacing = "50">页面效果如下：
下面我们删除cellspacing = "50"这段代码看看变化，如图：
通过对比，大家应该明白cellspacing这个属性的作用了吧。
通过为<table></table>标签的cellpadding进行赋值可以调整单元格边框与单元格内容之间的空间距离。
示例代码如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">页面效果如下：
通过与上图对比，我们不难发现变化。
设置表格颜色
这里我们要介绍一个全局属性style，对，你没看错！就是freestyle的那个style！英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上，可以为任何html元素设置颜色、大小、排列等不同属性！
值得一提的是把style信息如果写到一个独立文件中，并保存为css文件，就是以后我们要学的CSS层叠样式列表了。
这里我们先来简单了解一下它作为html的一个全局属性的用法。
示例代码如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">页面效果如图所示：
我们来分析一下这段代码，写法和其他属性大同小异。
首先也是才有"属性"="数值"的写法，具体是：style=""
是不是和其他属性写法一样？
但是到了双引号里面就不同了，比如width属性只需要为其赋值就可以，比如width="100%"。
而style是在双引号里面再指定属性。例如：style="background-color"。
然后我们再为background-color（背景颜色）属性赋值。
这时，赋值的写法就发生变化了，不是使用=号，而是使用：。
例如style="background-color ： #00ffff；"
大家注意的是为其赋值后，要用；结尾。这个；必须要添加，因为，通过style可以指定多个不同的样式属性，在指定多个样式属性时，我们使用；分割。
#00ffff这个符号是色彩的16进制表示方法，这个颜色是蓝色。
#000000这个符号的颜色是黑色。
#ffffff这个符号是白色。
这个颜色的算法我们会在下一期中详细讲解，感兴趣的小伙伴请关注！
大家想一想。如何为一列单元格指定背景颜色呢？
示例代码如下：我们为表格标题栏赋予绿色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年龄</th></tr>页面效果如图所示：
下面我们为"一列一行"、"二列一行"赋予红色。
示例代码如下：
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>页面效果如下：
今天的内容到此结束了，一下是今天示例的全部代码：
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格标题</caption>
<tr style = "background-color: #00ff00;">
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
