在油猴脚本中添加css样式的方法

由于项目要求，需要在系统页面注入dom元素，且对这些注入的元素在UI界面层有美观度要求，就避免不了要对其CSS样式优化。

通常在油猴脚本中添加CSS样式的方法如下：

一、引入外部css文件

// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
.......

   // 代码内部    引入bootstrap的css文件并加入html中
   const css = GM_getResourceText("customCSS");
   GM_addStyle(css);

二、使用油猴自带样式添加请求

// @grant        GM_addStyle
.......

// 代码内部 
var dropBox = document.createElement('div');
dropBox.setAttribute('id', 'dropbox');
GM_addStyle('#dropbox{display:none; width:400px;height:200px;padding:8px; ......}')

三、自定义样式函数

var fixButton = document.createElement('div');
setStyle(fixButton,{
    width: '100px', 
    height: '32px',
    borderRadius: '2px', 
    background: '#e33e33', 
    color:'#fff', 
    fontSize:'14px', 
    textAlign: 'center', 
    lineHeight:'32px', 
});
// 样式函数
function setStyle(dom,options,fn){
    new Promise(function(resolve,reject){
        for (let key in options){
            dom.style[key] = options[key];
        }
        resolve();
    }).then(res => {
        if (fn) {
            fn()
        }
    }).catch(err => {
        console.log(err)
    })
}

四、js添加样式

var dropBox = document.createElement('div');
dropBox.style.display = 'none';
dropBox.style.width = '400px';
dropBox.style.height = '200px';
dropBox.style.fontSize = '14px';
dropBox.style.color = '#888';
......

或

$('.dropbox').css({"display":"none","padding":"10px","width":"400px","height":"200px","font-size":"16px","font-weight":"bold","color":"#fff"})

以上是在油猴脚本中添加UI样式的方法