javascript - 在不影响页面的文本周围添加 html 元素(用于工具提示)

Question

我在这里构建了一个工具提示插件: http://shawntabrizi.com/cryptip/

来源:https://github.com/shawntabrizi/cryptip/blob/master/webextension/content.js

这里的基础是我使用 Tippy.js在某些匹配文本周围添加工具提示以显示价格信息。

为此，我查看 HTML 正文，找到任何文本节点，然后在该文本节点中搜索匹配的文本。如果找到匹配的文本，我会修改文本以包含 <span>使用某个类以触发 Tippy.js。

相关代码如下:

if (node.nodeType === 3) {
    var text = node.nodeValue;

    if (reCoins.test(text)) {
        text = text.replace(reCoins, function (a, b) {
            console.info('Adding cryptip to:' + b, element.tagName)
            let priceString = createPriceString(coindict, b, currency, time);
            return `<span class="cryptip" title="${priceString}">${b}</span>`;
        });

        var replacementNode = document.createElement('span');
        replacementNode.innerHTML = text;
        node.parentNode.insertBefore(replacementNode, node);
        node.parentNode.removeChild(node)
    }
}

但是，我收到报告称，在某些页面上，span 元素采用了影响页面呈现的样式。页面的一个示例是 https://yout.com/它在某些区域嵌套的 span 元素上有一个默认样式，这会产生这样的问题:

我尝试了一种解决方案，我将元素上的 CSS 设置为:

.cryptip {
    all: unset;
}

但是，该页面似乎正在其上加载其他样式:

所以我想我的问题是:

1. 我可以使用一些 CSS 技巧来避免我的元素被样式化吗？也许为一个跨度创建一个包含每个可能样式元素的 CSS 样式，并使用 !important 将其设置为默认值属性。
2. HTML 中是否有另一个我可以使用且不影响页面呈现的“psudo”元素？类似于 <foo class="cryptip"></foo>应该可以在页面上获得提示，但是否存在这样的元素？

Answer 1

如果您使用无法识别的 HTML 标记声明，则该节点是从 HTMLUnknownElement 原型(prototype)创建的，该原型(prototype)没有自己的属性和方法，但充当到从 HTMLElement 继承一切。 HTMLElement 是提供最基本元素方法和属性的原型(prototype)，例如 offsetHeight 和 style

你可以想象没有指定的伪元素，因为可以使用任何未分配的标签，但如果你可以设置你要替换的特定标签的样式，那显然是首选后人。

如果您必须在当前用例中使用未分配的标签，因为它是原型(prototype)，它的设置与其他元素一样，您将能够在 DOM 中搜索它。 section 标签直接继承自 HTMLElement 原型(prototype)，您可以类似地认为未知标签，因为它与 HTMLElement 原型(prototype)之间只有一个空对象。还值得注意的是，有一个 customElements w3c 正在查看规范，但它支持 is sparse .

总而言之，除了代码库的可维护性之外，我目前还没有意识到任何真正的缺点(您需要确保记录好您正在添加标签)并且您可能必须准备更改它，例如，如果将来自定义元素需要声明 - 请始终记住，不能保证它会始终像现在一样工作，因为没有关于该问题的规范并且浏览器变化无常。