ie 11

前沿拓展：

ie 11

1、你需要看一下这些Zip压缩文件是不是属于
哪一个应用程序。如果是在安装目录下的，最好谨慎对待。
2、可以双击看一下内容，是你需要的就留下，不需要的就删除。
3、即使不小心删除了某一个Zip文件，因为D盘为非系统文件，系统不会因此而崩溃，但有可能导致某一应用程序因缺少文件而无法打开。
4、如果你一定要将其删除，请先放入回收站，因为万一出了问题，还可以将其恢复。

大家好，今天我们来花 1 分钟来学习 DOM 相关的基础**作的第三部分，内容虽然简单，但是还是有必要归纳小编综合来说的，希望这些整理对大家有所帮助。

1、检测元素是否聚焦

假设 ele 表示您要检查它当前是否具有焦点的元素：

const hasFocus = ele === document.activeElement;2、检测 Internet Explorer 浏览器const isIe = function () {
const ua = window.navigator.userAgent;
return ua.indexOf('MSIE') > -1 || ua.indexOf('Trident') > -1;};

我们也可以依赖 document.documentMode。该属性表示文档的文档兼容模式，在 IE 5-11 中为整数。其他浏览器返回未定义。

const isIE = !!document.documentMode;3、检测 mac OS 浏览器

检查当前浏览器是否在 Mac 上运行：

const i**acBrowser = /Mac|iPod|iPhone|iPad/.test(navigator.platform);4、检测移动浏览器

以下是检查用户是否从移动浏览器浏览的几种方法。

检查浏览器是否支持pointer:coarse媒体查询

const i**obile = function () {
const match = window.matchMedia('(pointer:coarse)');
return match && match.matches;};

我们不能依赖屏幕尺寸，因为移动设备越来越大。

5、检测暗黑模式

macOS、Windows 10 等现代**作系统允许用户选择他们希望在所有应用程序中设置暗黑和明亮模式。

以下屏幕截图取自 macOS 的常规设置的窗格：

可以通过查看 prefers-color-scheme 媒体查询来检测该选项。

它可以是以下值之一：

light：用户希望在 light 模式下查看页面dark：用户希望在暗黑模式下查看页面no-preference：系统不知道用户的偏好

通过检查这个媒体查询值，我们可以确定用户设置的系统模式：

const isDarkMode = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;6、确定元素的高度和宽度

假设 ele 表示要计算大小的元素的 DOM。

// 获取 styles
const styles = window.getComputedStyle(ele);
// 不包含 padding and border
const height = ele.clientHeight – parseFloat(styles.paddingTop) – parseFloat(styles.paddingBottom);
const width = ele.clientWidth – parseFloat(styles.paddingLeft) – parseFloat(styles.paddingRight);
// 只包含 padding
const clientHeight = ele.clientHeight;
const clientWidth = ele.clientWidth;
// 包含 padding and border
const offsetHeight = ele.offsetHeight;
const offsetWidth = ele.offsetWidth;
// 包含 padding, border and margin
const heightWithMargin = ele.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
const widthWithMargin = ele.offsetWidth + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);小编综合来说

由于时间原因，今天分享的 DOM 基础**作专题就分享到这里，感谢你的阅读，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

来源：https://github.com/1milligram/html-dom