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

在一个用Angular构建的Web应用程序中，我加载了一个非常大的字典，并且显示了大量的内容。当一个单词有定义时，我用

边框底部：1px点绿色

。 我使用一个自定义的

标记来实现这一点，该标记是在加载字典时生成的。生成的CSS如下所示：

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

（是的，所有单词都被拆分为具有数据单词属性的单个跨距）

然后，我使用事件委托并检查所单击单词的

getComputedStyle

/

borderBottomColor

，查看该单词是否有定义

问题：

我想设置一个包含定义ID的CSS属性，我可以从

getComputedStyle

中提取该属性。但是，CSS属性不能在视觉上改变元素。也许有一个属性我可以“部分”设置，即“有效”，但不会呈现任何内容

问题：

我可以使用哪些CSS属性？它必须在移动/平板电脑上可用，包括Android和iOS

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

还有一个小操场可以玩

多谢各位

编辑：

我已经尝试过在桌面上使用outline属性。但在我的手机上，速度太慢了。移动chrome肯定在做计算。请注意，我已经从

大纲：1px实心透明至
轮廓：1063px实心透明。关于我可以使用什么属性的提示？我已将所有
px
值更改为
1
，效果良好。它必须讨厌太大的
px
值

编辑：

它一直在使用
转换持续时间
，直到我对这些单词进行了分类。有时我不得不等上几秒钟才能看到课堂的效果。我需要另一个属性。
一个不太可能经常使用的css样式是outline。（语法与边框相同）

编辑：
回想起来，这似乎不是最好的方法。我想它会减慢手机的速度，因为虽然它没有显示轮廓，但它仍然渲染了轮廓。随着大纲进入1000年，它变得太慢而不实用。使用
转换持续时间
效果更好。
我最终使用了

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

和这个正则表达式一起

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

要提取ID
808
如何
轮廓：0px实心透明
？应该是不可见的。为什么不设置另一个data-*属性呢？@PatrickEvans当跨距是用data word属性生成的时，他们不“知道”字典。@JosephMarikle这似乎暂时有效。我可以设置轮廓：IDpx实心透明。但我不知道当ID在1000时会发生什么，我不想点击“错误”的单词。“我不知道这两个词是否会重叠。”约瑟夫马里克尔写下你的评论作为回答。今天我将做进一步的测试，但目前它在我的浏览器中确实有效。从所有评论来看，这是唯一一个在我的浏览器上有效的建议。它确实有效。但由于某些原因，在我的手机上它真的很慢。它必须使用outline属性计算某些内容。这并不是因为我生成的CSS太大：我注释掉了大纲，它的速度很快，有上千个[数据字]属性。即使将这些属性链接到边框底部，我的手机也能很好地渲染它。你知道我可以用什么来代替提纲吗？我试过用提纲：我的每一个[数据字]都是1px实心透明的，效果很好。我必须使用一个当我达到1000秒px时不会延迟的属性。@Cybrix过渡持续时间（javascript值为transitionDuration）如何？这应该可以让你的价值观进入1000没有问题。完美。我还没有用iOS设备测试过，但它正在我的Android手机上运行。非常感谢。你想更新上面的答案吗？这样我就可以接受了。
window.getComputedStyle(e.target).fontFamily.match(/\d/g).join('')