由于项目要求，需要在系统页面注入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';
......或文章来源：https://www.toymoban.com/news/detail-819248.html
$('.dropbox').css({"display":"none","padding":"10px","width":"400px","height":"200px","font-size":"16px","font-weight":"bold","color":"#fff"})以上是在油猴脚本中添加UI样式的方法文章来源地址https://www.toymoban.com/news/detail-819248.html
到了这里，关于在油猴脚本中添加css样式的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
