由于項(xiàng)目要求，需要在系統(tǒng)頁面注入dom元素，且對這些注入的元素在UI界面層有美觀度要求，就避免不了要對其CSS樣式優(yōu)化。
通常在油猴腳本中添加CSS樣式的方法如下：
一、引入外部css文件
// @resource customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @grant GM_addStyle
// @grant GM_getResourceText
.......
// 代碼內(nèi)部 引入bootstrap的css文件并加入html中
const css = GM_getResourceText("customCSS");
GM_addStyle(css);二、使用油猴自帶樣式添加請求
// @grant GM_addStyle
.......
// 代碼內(nèi)部
var dropBox = document.createElement('div');
dropBox.setAttribute('id', 'dropbox');
GM_addStyle('#dropbox{display:none; width:400px;height:200px;padding:8px; ......}')三、自定義樣式函數(shù)
var fixButton = document.createElement('div');
setStyle(fixButton,{
width: '100px',
height: '32px',
borderRadius: '2px',
background: '#e33e33',
color:'#fff',
fontSize:'14px',
textAlign: 'center',
lineHeight:'32px',
});
// 樣式函數(shù)
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';
......或文章來源：http://www.zghlxwxcb.cn/news/detail-819248.html
$('.dropbox').css({"display":"none","padding":"10px","width":"400px","height":"200px","font-size":"16px","font-weight":"bold","color":"#fff"})以上是在油猴腳本中添加UI樣式的方法文章來源地址http://www.zghlxwxcb.cn/news/detail-819248.html
到了這里，關(guān)于在油猴腳本中添加css樣式的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
