获取焦点后,样式异常的处理方法

问题

在使用monaco-editor 设置代码提示未正常显示,提示框出现,看不到内容,如图

看不到内容,有两种情况:

情况一:没有得到数据,所以没有展示;

情况二:得到了数据,展示异常;

最终发现情况二的问题,样式被改写了,内部的样式类与外部的样式类同名,修改外部的样式类名解决的;

带失焦问题的定位

难点:上面问题的难点在于,想要通过控制台查看问题标签样式结构时,就会失焦,提示框就会消失,无法看到问题标签内部结构

过程:

  1. 首先在一个简单页面内进行调试;
  2. 通过反复失焦,找到与失焦关联的元素;
  3. 在控制台中,通过定时器反复获取失焦关联元素的DOM数据;
  4. 将获取的DOM数据在放到页面中,通过控制台调试样式,寻找问题点(我就是在这里发现的样式名冲突,样式错乱的问题)

所有这种获取焦点后展示异常的问题都可以用这种方式解决

相关推荐
Bigger1 分钟前
第八章:我是如何剖析 Claude Code 里的“电子宠物”彩蛋的
前端·ai编程·源码阅读
qq_12084093717 分钟前
Three.js 模型加载与线上稳定性实战:路径、跨域、缓存与降级全链路指南
开发语言·javascript·缓存·vue3
qq_3643717214 分钟前
NestJS + LangChain SSE 流式输出 + 前端实时渲染打字机效果
前端·langchain
qq_120840937115 分钟前
Vue3 + Three.js 实战入门:从零搭建可交互3D场景(含模型加载与性能优化)
javascript·3d·vue3·交互
1314lay_100716 分钟前
axios的Post方法和Delete方法的参数个数和位置不同,导致415错误
前端·javascript·vue.js·elementui
LXXgalaxy23 分钟前
HTML头部元信息避坑指南
前端·html
qq_3813385024 分钟前
现代 CSS 黑科技:Container Queries、:has() 与嵌套语法实战
前端·css·科技
枫叶丹425 分钟前
【HarmonyOS 6.0】ArkWeb:Web组件销毁模式深度解析
开发语言·前端·华为·harmonyos
拉拉尼亚26 分钟前
WebRTC 完全指南:原理、教程与应用场景
前端·typescript·实时音视频
lkbhua莱克瓦2427 分钟前
ZogginWeb 电脑端沉浸式记单词整合优化方案(终极版)
前端·zogginweb开发