javascript - 使用 Javascript 确定文本样式

Question

我当前正在使用可编辑的 WebView，并提供将所选文本更改为 <H1> 的控件。 ~ <H6> 。默认normal样式文本只是 <div>
我想知道，如何使用 javascript 来检查文本对应的样式类型(H1~H6 或 DIV)...

我目前正在使用以下代码将所选文本的文本样式修改为 <H1>

[webView stringByEvaluatingJavaScriptFromString:
                @"document.execCommand(\"FormatBlock\", false, \"<H1>\")"];

有没有办法使用 JavaScript 检查所选文本的样式(无论是通过拖动，还是仅通过光标的位置)？

Answer 1

HTML 内容中的选择可能跨越多个元素。它也可能仅包含开始和结束元素中的部分文本。这使得很难为您的问题提供准确的答案，因为在一般情况下，没有单个元素名称或 CSS 样式应用于选择。但是，希望下面提到的构建 block 能够让您构建符合您意图的行为。

由于您正在使用 WebKit 的 Objective-C API，因此我将描述它如何在 Objective-C API 和 JavaScript 中工作。由于使用 JavaScript 无法获得编译器反馈，因此使用 Objective-C API 会更加愉快。

<小时/>

WebView 中的选择表示为 DOMRange，并且可以使用 -[WebView selectedDOMRange] 进行检索。选择从 -startContainer 返回的元素开始，位于节点文本的偏移量 -startOffset 处。继续按 DOM 顺序选择所有节点，直到 -endContainer 返回的节点内的偏移量 -endOffset。

插入点表示为折叠的 DOMRange，如 collapsed 属性所示。在这种情况下，-startContainer 和 -endContainer 应返回相同的值，指示插入符所在的节点，并且 -startOffset 和 -endOffset 将相等，表示插入符号所在文本内容的偏移量。

确定涉及的节点后，您可以使用常规 DOM API 来确定标签名称 (-[DOMNode tagName]) 和 CSS 对象模型 API 来检索样式信息 ( -[DOMDocument getCompulatedStyle:pseudoElement:])。

<小时/>

从 JavaScript 方面来看，概念相似，但在到达 Range 之前有一个 Selection 对象的中间步骤。

您使用window.getSelection()来检索Selection对象。该对象将包含零个或多个范围，每个范围代表一个选定的区域。零范围意味着存在插入点而不是真正的选择。由于某些平台支持不连续选择，因此允许多个范围。

如上所述，Selection 对象的 rangeCount 为零，isCollapsed 值为 true，表示选择只是插入点。

当 rangeCount 不为零时，您可以通过重复调用 getRangeAt 来迭代 Selection 中的范围。从那时起，您将返回使用与上述 Objective-C 案例中描述的 DOMRange 对象具有相同接口(interface)的 Range 对象，并使用 startContainer、endContainer、startOffset 和 endOffset 属性。