大家好，今天我们来花 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 isMacBrowser = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

4、检测移动浏览器

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

4.1、 检查userAgent（不推荐）

// You can add more if you want
const isMobile = /Android|BlackBerry|iPad|iPod|iPhone|webOS/i
.test(navigator.userAgent);

4.2、使用特征检测

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

const isMobile = 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

推荐阅读

1 分钟学 6 个常见的 DOM 基础操作（一）

1 分钟学 6 个常见的 DOM 基础操作（二）