javascript - 不影响元素视觉效果的 CSS 属性

Question

在使用 Angular 构建的 Web 应用程序中，我加载了一个非常大的字典，并且还显示了很多内容。当一个词有定义时，我会用 border-bottom: 1px dotted green 来设置它的样式。 .我使用自定义 <style> 执行此操作我在字典加载时构建的标签。生成的 CSS 如下所示:

[data-word="lorem"],[data-word="ipsum"] { border-bottom: 1px dotted green; }

(是的，所有的词都被分割成一个带有数据词属性的跨度)

然后我使用事件委托(delegate)并检查 getComputedStyle/borderBottomColor以查看该词是否有定义。

问题:

我想设置一个包含定义 ID 的 CSS 属性，我可以从 getComputedStyle 中提取它.但是，该 CSS 属性不得在视觉上改变元素。也许有一个我可以“部分”设置的属性，即“有效”但不会呈现任何内容。

问题:

我可以使用哪些 CSS 属性？它必须适用于 Android 和 iOS 手机/平板电脑。

我不是在寻找更好的方法，我已经依赖于该应用程序的大量指令。相同的词可能在文本中出现多次。我想避免遍历所有单词。

还有一个小jsfiddle Playground 。

非常感谢。

编辑:

我已经尝试过在我的桌面上工作的 outline 属性。不过在我的手机上，速度太慢了。移动 chrome 必须进行计算。请注意，我来自 outline: 1px solid transparent;至 outline: 1063px solid transparent; .关于我可以使用什么属性的任何提示？我已经改变了所有 px值为 1它工作正常。一定是恨太大了px值(value)观。

编辑:

它正在与 transition-duration 一起工作直到我对这些词应用了类(class)。有时我不得不等待几秒钟才能显示出类的效果。我需要其他属性。

Answer 1

大纲是不太可能经常使用的一种 css 样式。 (语法同border)

outline: 0px solid transparent

编辑:

回想起来，这似乎不是最好的方法。我认为它减慢了手机的速度，因为虽然它没有显示轮廓，但它仍然渲染了它。随着轮廓进入 1000 年代，它变得太慢而不实用。使用 transition-duration 效果更好。