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

问题

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

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

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

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

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

带失焦问题的定位

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

过程:

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

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

相关推荐
zhifou1234563 小时前
Vue基础(二)
前端·javascript·vue.js
两只羊ovo3 小时前
手写一个最小版 Claude Code:从任务拆解到 Agent Loop 转起来
前端
给个offer养家糊口3 小时前
抽离 elpis npm 包
前端
默_笙3 小时前
🙃 我让爬虫终于看到了我的网站,后端同事说"这也行?"(下):App Router 全栈实战
前端·javascript
九九落3 小时前
JavaScript 实现北京时间精确到毫秒显示:UTC+8、Asia/Shanghai 与在线时间校准详解
开发语言·javascript·ecmascript
葡萄城技术团队3 小时前
一个单元格放置两个日期选择器:用 SpreadJS CellButtons 录入日期范围
前端
FEF前端团队4 小时前
小程序微信支付 V3 接入实战手册:从商户配置到前后端落地
javascript·后端·node.js
马可家的菠萝4 小时前
自动保存已经有了,为什么笔记软件还需要“历史版本”?
前端·后端·架构
半个落月5 小时前
从 "use client" 到 Route Handler:用 Todos 理解 Next.js 水合与全栈请求
前端·react.js·next.js
qq_452396235 小时前
第七篇:《大型前端项目的模块化与目录结构设计》
前端