show css style
// ==UserScript==
// @name ShowCssStyle
// @namespace http://tampermonkey.net/
// @version 0.1
// @description show css style
// @author Roastwind
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创意来源: https://juejin.im/pin/5d80b839e51d456cecc4a8e4
// 按钮id
var _id = 'show-css-style'
// style id
var _style_id = 'add-style'
var _outline_css = `html * { outline: 1px solid red }#${_id}{outline: none;}#${_id} * {outline: none;}`
var init = function() {
// 容器
var btnWrap = document.createElement('div')
btnWrap.style.position = 'fixed'
btnWrap.style.zIndex = '99999'
btnWrap.style.width = '42px'
// btnWrap.style.height = '60px'
btnWrap.style.left = '0'
btnWrap.style.top = '200px'
btnWrap.style.display = 'flex'
btnWrap.style.flexDirection = 'column'
btnWrap.setAttribute('id', _id)
// 展示按钮
var showBtn = document.createElement('btn')
showBtn.style.width = '40px'
showBtn.style.height = '20px'
showBtn.style.lineHeight = '20px'
showBtn.style.border = '1px solid gray'
showBtn.style.marginBottom = '10px'
showBtn.style.borderRadius = '5px'
showBtn.style.textAlign = 'center'
showBtn.style.cursor = 'pointer'
showBtn.innerText = 'show'
showBtn.addEventListener('click', function() {
addCssLine()
})
// 隐藏按钮
var hideBtn = document.createElement('btn')
hideBtn.style.width = '40px'
hideBtn.style.height = '20px'
hideBtn.style.lineHeight = '20px'
hideBtn.style.border = '1px solid gray'
hideBtn.style.marginBottom = '10px'
hideBtn.style.borderRadius = '5px'
hideBtn.style.textAlign = 'center'
hideBtn.style.cursor = 'pointer'
hideBtn.innerText = 'hide'
hideBtn.addEventListener('click', function() {
removeCssLine()
})
btnWrap.appendChild(showBtn)
btnWrap.appendChild(hideBtn)
document.body.appendChild(btnWrap)
}
var addCssLine = function() {
var hasAddStyle = document.querySelector(`#${_style_id}`)
if (hasAddStyle) { return }
var style = document.createElement('style')
style.textContent = _outline_css
style.setAttribute('id', _style_id)
document.body.appendChild(style)
}
var removeCssLine = function() {
var addStyle = document.querySelector(`#${_style_id}`)
if (addStyle) {
addStyle.remove()
}
}
init()
})();