JavaScript 获取当前光标字体大小(不确定元素)

108 阅读1分钟

要获取当前光标所在位置的字体大小,需要通过以下步骤:

  1. 获取当前光标所在的DOM元素。

  2. 检查当前光标是否在文本节点中。

  3. 如果光标在文本节点中,则获取该节点的父元素的字体大小。

  4. 如果光标不在文本节点中,则递归查找父元素,直到找到包含文本节点的元素,然后获取该元素的字体大小。

示例代码:

javascriptfunction getFontSizeAtCursor() {
  let sel = window.getSelection();
  let range = sel.getRangeAt(0);
  let node = range.commonAncestorContainer;
  if (node.nodeType != 1) {
    node = node.parentNode;
  }
  let font_size = window.getComputedStyle(node).getPropertyValue('font-size');
  return font_size;
}

该函数首先获取当前光标的选择对象,然后获取该选择对象的第一个范围(即当前光标所在位置的范围),然后获取该范围的公共祖先节点。

如果该公共祖先节点不是元素节点,则递归向上查找其父节点,直到找到一个元素节点。

最后,获取该元素节点的计算样式(包含了该元素的所有样式,包括字体大小),并返回字体大小值。