在油猴脚本中添加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样式的方法

在油猴脚本中添加css样式的方法相关推荐

如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
如何在React JS组件和React JS App中添加CSS样式？
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
HTML文档中应用css样式的方法总结
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式一.link标签链接外部样式表先看一条较为标准的l ...
html引入css报错,html中引入css样式的方法总结
CSS是用来控制网页数据的表现,可以使网页的表现与数据内容分离.要想让CSS对网页内容有效果,必须将CSS代码引入网页,使网页更具有美观性,有动感的效果,那么如何实现引入css呢?今天就来给大家总结! ...
html怎样添加css样式,html添加css样式的方法
Hostinger Tutorials Something usefull here.
怎么在jq中添加html样式,jquery怎么添加css样式
jquery添加css样式的方法:1.使用addClass()方法添加css样式,语法如"$(selector).addClass(class)":2.使用css()方法设置css ...
油猴脚本、常用拓展的教程
目录油猴脚本常用拓展本文章为个人经验总结,没有广告以及营销想法. 油猴脚本注:油猴脚本部分分两部分:拓展安装教程.脚本下载教程油猴脚本在主流浏览器都可以安装,本篇以edge为例 1.打开浏览 ...
Chrome插件与油猴脚本
Chrome插件与油猴脚本简介油猴脚本编写要点简介开发过Chrome插件的开发者,都会被Chrome插件的content,background(service),popup,inject 等各 ...

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

在油猴脚本中添加css样式的方法相关推荐

最新文章

热门文章