Question

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

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

（是的，所有单词都在单跨中分割，并带有数据字属性）

然后我使用事件委派并检查所点击单词的getComputedStyle / borderBottomColor，看看该单词是否有定义。

问题：

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

问题：

我可以使用哪些CSS属性？它必须适用于移动设备/平板电脑，包括Android和iOS。

我不是在寻找更好的方法，我已经依赖于该App的重指令。相同的单词可能会在文本中出现多次。我想避免循环所有的话。

此外，还有一个小jsfiddle游乐场可以玩。

非常感谢。

修改

我尝试过在我的桌面上运行的outline属性。在我的手机上，它太慢了。移动铬必须进行计算。请注意，我来自outline: 1px solid transparent;到outline: 1063px solid transparent;。关于我可以使用什么属性的任何提示？我已将所有px值更改为1，并且工作正常。它必须讨厌过大的px值。

修改

它正在使用transition-duration，直到我对这些单词应用了类。有时我必须等待几秒钟才能显示课程的效果。我需要另一个属性。

Answer 1

一种不太常用的css风格是大纲。（语法与边框相同）

outline: 0px solid transparent

编辑：

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

Answer 2

我最终使用

font-family: 'Open Sans', Helvetica, Arial, '808', sans-serif;

以及此正则表达式

window.getComputedStyle(e.target).fontFamily.match(/\d/g).join('')

提取ID 808

不会在视觉上影响元素的CSS属性

2 个答案:

编辑：