如何使用CSS覆盖element.style属性调整悬浮触发侧边面板位置

问题背景 #

需要修改鼠标hover选项时弹出的侧边面板的位置，Chrome开发者工具中可见对应元素的行内样式设置了left : 80px，需要将该值调整为76px，但该样式属于element.style，无法直接在CSS文件中选中该属性进行修改。
注：行内样式（即element.style）的默认优先级高于所有外部、内部CSS普通样式声明，因此常规CSS选择器无法直接覆盖，可采用以下三种方案处理：

解决方案 #

方案1：CSS使用!important强制覆盖 #

先在Chrome开发者工具中拿到该侧边面板的唯一选择器（右键元素 → 复制 → 复制选择器即可获取），然后在你的CSS文件中添加如下声明：

/* 替换成你复制到的元素选择器 */
.your-side-panel-selector {
  left: 76px !important;
}

建议将这段代码放在样式表的最末尾，避免被其他同优先级的!important规则覆盖。

方案2：通过JavaScript动态修改行内样式 #

如果该面板是hover时才动态插入DOM的，或者你不想使用!important，可以用JS直接修改元素的行内属性：

// 替换成你复制到的元素选择器
const sidePanel = document.querySelector('.your-side-panel-selector')
// 如果面板是hover触发才生成，可以把修改逻辑放在hover事件的回调里
if (sidePanel) {
  sidePanel.style.left = '76px'
}

方案3：修改框架源码中的动态样式绑定 #

如果你的项目使用Vue、React等前端框架，该left: 80px是框架绑定的动态样式，直接找到对应组件中绑定style属性的逻辑，将控制left值的变量/常量从80px改为76px即可，无需额外添加CSS或JS代码。

内容的提问来源于stack exchange，提问作者Alexis Stallman