无法使用 javascript 更改 css

Posted 2023-03-22

【中文标题】无法使用 javascript 更改 css

【英文标题】：Unable to change css using javascript

【发布时间】：2018-12-12 02:49:48

【问题描述】：

在 handsontable 的 _afterOnCellMouseOver 函数中，当我将鼠标悬停在列标题上时，我试图更改它们的 css 颜色属性。

_afterOnCellMouseOver(e, coords, td) 
    if (coords.row === -1 &&& this.hot) 
        let contElem = document.getElementById(`cont$varId`);
        contElem.style.color = "purple";
    

div.hotColHeaderContainer 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    position: relative;

<div class="$styles.hotColHeaderContainer" id=cont$varId> </div>

我的 div.hotColHeaderContainer 包含在一个 scss 文件中，我的 div 包含在一个用于生成列标题的函数中。 varId 是根据列标题中使用的变量名称更改名称的变量。为什么我无法从 _afterOnCellMouseOver 中更改样式？我对 javascript、handsontable 和 css 非常陌生。

【问题讨论】：

不用js也可以，用css hover属性

为什么<div class="$styles.hotColHeaderContainer" id=cont$varId> </div> 应该有效？这在纯 html 上是不可能的。你在使用任何框架吗？

正如@Rumesh 所说，确实为过度行为放弃了 JS。通过使用 :hover 选择器w3schools.com/cs-s-ref/sel_hover.asp

使用完整的 CSS 解决方案

***.com/questions/848840/…

JavaScript 解决方案根本不可能吗？悬停效果很好，但我只是好奇。

【参考方案1】：

您可以只使用 css hover 选择器。以下片段：

div.hotColHeaderContainer 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    position: relative;

div.hotColHeaderContainer:hover 
    color: purple

<div class='hotColHeaderContainer'>Hello</div>