ag-Grid如何给元素添加css

Question

当我将鼠标悬停在 ag-Grid 中的某个元素（例如一行）上时，我注意到它添加了一些内联 css 来突出显示该元素。例如，当未选择元素时，html 看起来像这样：

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

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

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

我想知道 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 的开发人员工具中，您可以右键单击指定为 [=10=] 的元素（在您的问题中），然后右键单击 "Break on... -> attribute modifications"。一旦 style 属性发生变化，您就会看到它的来源。

不过我确实觉得你的问题有点XY Problem...

ag-Grid如何给元素添加css

How does ag-Grid add css to elements

html

javascript

css

ag-grid