ShowCssStyle

show css style

  1. // ==UserScript==
  2. // @name ShowCssStyle
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.4
  5. // @description show css style
  6. // @author Roastwind
  7. // @match *://*/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13. // 创意来源: https://juejin.im/pin/5d80b839e51d456cecc4a8e4
  14. // 按钮id
  15. var _id = 'show-css-style'
  16. // style id
  17. var _style_id = 'add-style'
  18. var _btn_id = 'show-css-btn'
  19. var _outline_css = `html * { outline: 1px solid red }#${_id}{outline: none;}#${_id} * {outline: none;}`
  20. var _text_show = 'show'
  21. var _text_hide = 'hide'
  22.  
  23. var init = function() {
  24. // 容器
  25. var btnWrap = document.createElement('div')
  26. btnWrap.style.position = 'fixed'
  27. btnWrap.style.zIndex = '99999'
  28. btnWrap.style.width = '42px'
  29. // btnWrap.style.height = '60px'
  30. btnWrap.style.left = '0'
  31. btnWrap.style.top = '200px'
  32. btnWrap.style.display = 'flex'
  33. btnWrap.style.flexDirection = 'column'
  34. btnWrap.setAttribute('id', _id)
  35.  
  36. // 展示按钮
  37. var btn = document.createElement('btn')
  38. btn.style.width = '40px'
  39. btn.style.height = '20px'
  40. btn.style.lineHeight = '20px'
  41. btn.style.border = '1px solid gray'
  42. btn.style.marginBottom = '10px'
  43. btn.style.borderRadius = '5px'
  44. btn.style.textAlign = 'center'
  45. btn.style.cursor = 'pointer'
  46. btn.style.userSelect = 'none'
  47. btn.style.fontSize = '14px'
  48. btn.innerText = _text_show
  49. btn.setAttribute('id', _btn_id)
  50. btn.addEventListener('click', function() {
  51. if (hasShow()) {
  52. removeCssLine()
  53. setBtnText(_text_show)
  54. }
  55. else {
  56. addCssLine()
  57. setBtnText(_text_hide)
  58. }
  59. })
  60.  
  61. btnWrap.appendChild(btn)
  62. document.body.appendChild(btnWrap)
  63. }
  64. // 是否已添加
  65. var hasShow = function() {
  66. var btn = document.querySelector(`#${_btn_id}`)
  67. return btn && btn.innerText === _text_hide
  68. }
  69. // 设置按钮文本
  70. var setBtnText = function(text) {
  71. var btn = document.querySelector(`#${_btn_id}`)
  72. if (btn) {
  73. btn.innerText = text
  74. }
  75. }
  76. // 添加样式红线
  77. var addCssLine = function() {
  78. var hasAddStyle = document.querySelector(`#${_style_id}`)
  79. if (hasAddStyle) { return }
  80.  
  81. var style = document.createElement('style')
  82. style.textContent = _outline_css
  83. style.setAttribute('id', _style_id)
  84. document.body.appendChild(style)
  85. }
  86. // 移除样式红线
  87. var removeCssLine = function() {
  88. var addStyle = document.querySelector(`#${_style_id}`)
  89. if (addStyle) {
  90. addStyle.remove()
  91. }
  92. }
  93. if (window === parent) {
  94. init()
  95. }
  96. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址