记一次fvs修改样式的操作
产品现状和需求
fvs控件的提示框样式为灰色,字体为黑色,看不清内容,和看板整体白色风格也不匹配,需要字体明显些,背景变成白色
解决问题过程
1.通过帮助文档,问答等途径快速确定了没有现成的解决方案
2.自己抓取元素,修改插件包或者使用js对页面进行修改
1)由页面可以看出这个通过简单的抓取元素很难获取,因为是和鼠标移动有关,这样的话,肯定在这个控件上有关于鼠标的监听事件,使用F12的事件侦听器,定位该元素监听事件,可以得到该元素有三个关于鼠标的监听事件
删除out和over事件后,可以使提示框留在页面上,如图
定位到元素模块中的该元素,查看样式,调试其background颜色,可以看出是.bi-tooltip.tooltip-success属性控制
定位到源代码模块,可以找到具体的css文件,该文件路径为插件路径
对插件jar包进行反编译,可以看到具体的css和值,这里我修改过了,原来是灰色
到此可以提供一个长期方案,修改jar包中的css,再重新安装插件,就可以改颜色,此方案有风险,不知道此css还用于其它什么地方
客户对此方案不是很满意,要求每个模板可以自定义,这样的话就得从模板下手了,主要是两个方向,一是对加载完成后的css文件进行修改,二是对加载后的document进行自定义,从可操作性和难度考虑,选择2方案
2方案细分可以有多种修改方案,例如,添加整体样式类,在现有的样式类添加属性等
这里为了好理解,采用用js添加新样式类的方法,也就是添加带有.bi-tooltip.tooltip-success属性的style,代码如下
"use document"; let style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(` .bi-tooltip.tooltip-success { background: #ffffff !important;// 修改为你想要的颜色 } `)); document.head.appendChild(style);
这里需要注意,fvs在2版本后取消了对document对象的默认引用,要引用document需要添加"use document"; 才可,这个问题困扰了我好久,反复试cpt和frm,都可以引用,就fvs不行😭
经验总结
此次样式修改,应该适用于fvs上的多数非实时计算的样式
在fvs使用document对象前,一定要声明"use document",cpt和frm不需要