javascript - ag-Grid如何给元素添加css

Question

当我将鼠标悬停在 ag-Grid 中的某个元素(例如一行)上时，我注意到它添加了一些内联 css 来突出显示该元素。例如，当未选择元素时，html 如下所示:

<div class="ag-full-width-viewport" role="presentation" 
style="border-right: 0px solid transparent;"> == $0

但是，当我将鼠标悬停在这个元素上时，它会自动突出显示并添加内联 css:

<div class="ag-full-width-viewport" role="presentation" 
style="border-right: 0px solid transparent: border-bottom: 0px solid 
transparent;"> == $0

我想知道 api 究竟是如何做到这一点的。我在源代码的哪里可以看到这个逻辑？我想知道将我自己的 css 添加到网格中的特定元素的目的...而不是使用 api 的 getRowClass() 等

Answer 1

大概是这样的:

https://github.com/ag-grid/ag-grid/blob/b4353aba1a2405d2133ef0726dc6733596435d9d/src/ts/gridPanel/gridPanel.ts#L864

通过此搜索找到:

https://github.com/ag-grid/ag-grid/search?utf8=✓&q=transparent+extension%3Ajs+extension%3Ats&type=

如果需要，您可以使用浏览器开发人员工具对其进行调试。例如，在 Chrome 的开发人员工具中，您可以右键单击指定为 $0 的元素(在您的问题中)，然后“Break on... -> attribute modifications”。一旦 style 属性发生变化，您就会看到它的来源。

我确实觉得你的问题有点 XY Problem虽然……