☰

DomToLess

此插件可以一键获取页面的less结构，方便写样式!

  1. // ==UserScript==
  2. // @name         DomToLess
  3. // @namespace    http://www.baidu.com/
  4. // @version      3.0.7
  5. // @description  此插件可以一键获取页面的less结构，方便写样式!
  6. // @author       DomToLess Teams
  7. // @match        *://*/*
  8. // @icon         
  9. // @grant        GM.registerMenuCommand
  10. // @grant        GM_registerMenuCommand
  11. // @license MIT
  12. // ==/UserScript==
  13. (function () {
  14.   'use strict';
  15.  
  16.  
  17.   var _GM_registerMenuCommand;
  18.   if (typeof GM_registerMenuCommand != 'undefined') {
  19.     _GM_registerMenuCommand = GM_registerMenuCommand;
  20.   } else if (typeof GM != 'undefined' && typeof GM.registerMenuCommand != 'undefined') {
  21.     _GM_registerMenuCommand = GM.registerMenuCommand;
  22.   } else {
  23.     _GM_registerMenuCommand = (s, f) => { };
  24.   }
  25.   _GM_registerMenuCommand("DomToLess", () => {
  26.     var DomToLess_box = document.getElementById("DomToLess_box");
  27.     DomToLess_box.classList.add("active");
  28.     setTimeout(() => {
  29.       document.getElementById("dtl_sel").focus();
  30.     }, 100)
  31.   });
  32.  
  33.  
  34.   var css_style = document.createElement("style");
  35.   css_style.innerHTML = "div.DomToLess_box{font-family:'weiruanyahei';width:100vw;height:100vh;overflow:hidden;position:fixed;top:0;left:0;z-index:999999999999999999999999;background-color:rgba(0,0,0,0.7);transition:all 0.5s;opacity:0;visibility:hidden;box-sizing:border-box;}div.DomToLess_box *{box-sizing:border-box;}div.DomToLess_box.active{opacity:1;visibility:visible;}div.DomToLess_box div.DomToLess_inner{width:100%;height:100%;max-width:800px;height:600px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:30px;}div.DomToLess_box div.DomToLess_inner div.close{width:30px;height:30px;position:absolute;right:0;top:0;color:#000;line-height:30px;text-align:center;user-select:none;cursor:pointer;transition:all 0.5s;}div.DomToLess_box div.DomToLess_inner div.close:hover{background-color:#79b1f5;color:#fff;}div.DomToLess_box div.DomToLess_inner div.topbar{padding:10px 0;border-bottom:1px solid #000;margin-bottom:30px;}div.DomToLess_box div.DomToLess_inner div.line{display:flex;align-items:center;}div.DomToLess_box div.DomToLess_inner div.line div.inps{width:50%;margin-right:20px;}div.DomToLess_box div.DomToLess_inner div.line div.inps input#dtl_sel{border:0;outline:0;padding:0 15px;line-height:40px;border:1px solid #ddd;font-size:16px;width:100%;}div.DomToLess_box div.DomToLess_inner div.line div.right{display:flex;align-items:center;flex:1;}div.DomToLess_box div.DomToLess_inner div.line div.checkboxs{display:flex;flex-direction:column;flex:1;justify-content:space-between;}div.DomToLess_box div.DomToLess_inner div.line div.checkboxs label{display:flex;align-items:center;width:100%;font-size:14px;}div.DomToLess_box div.DomToLess_inner div.line div#dtl_btn{user-select:none;cursor:pointer;line-height:40px;background-color:#79b1f5;min-width:150px;text-align:center;color:#fff;font-size:16px;transition:all 0.5s;margin-left:20px;}div.DomToLess_box div.DomToLess_inner div.line div#dtl_btn:hover{background-color:#79b1f5db;}div.DomToLess_box div.DomToLess_inner div.dtl_textareabox{display:block;width:100%;height:70%;margin-top:30px;}div.DomToLess_box div.DomToLess_inner div.dtl_textareabox textarea#dtl_textarea{width:100%;height:100%;border:0;outline:0;resize:none;border:1px solid #ddd;padding:15px;font-size:16px;}@media screen and (max-width:768px){div.DomToLess_box div.DomToLess_inner div.topbar{margin-bottom:20px;}div.DomToLess_box div.DomToLess_inner div.line{flex-wrap:wrap;}div.DomToLess_box div.DomToLess_inner div.line div.inps{width:100%;margin-right:0;margin-bottom:10px;}div.DomToLess_box div.DomToLess_inner div.line div.right{width:100%;}div.DomToLess_box div.DomToLess_inner div.dtl_textareabox{margin-top:10px;}}@media screen and (max-width:768px){div.DomToLess_box div.DomToLess_inner{padding:20px;width:96vw;}}"
  36.   document.body.appendChild(css_style);
  37.  
  38.  
  39.   var pupout_dom = document.createElement("div");
  40.   let _html = '<div class="DomToLess_box"id="DomToLess_box"><div class="DomToLess_inner"><div class="close"id="close">x</div><div class="topbar">DomToLess</div><div class="line"><div class="inps"><input type="text"id="dtl_sel"placeholder="输入css选择器"></div><div class="right"><div class="checkboxs"><label class="hasTag"><input type="checkbox"id="hasTag"><span>使用标签选择器</span></label><label class="ischild_sel"><input type="checkbox"id="ischild_sel"><span>使用子选择器（＞）</span></label></div><div id="dtl_btn">获取</div></div></div><div class="dtl_textareabox"><textarea id="dtl_textarea"></textarea></div></div></div>';
  41.   pupout_dom.innerHTML = _html
  42.   document.body.appendChild(pupout_dom);
  43.  
  44.  
  45.   document.addEventListener("click", function (event) {
  46.     // 處理關閉
  47.     if (event.target == document.getElementById("close")) {
  48.       DomToLess_box.classList.remove(`active`);
  49.       document.getElementById("dtl_sel").value = '';
  50.       document.getElementById("dtl_textarea").value = '';
  51.     }
  52.  
  53.     // 處理獲取
  54.     if (event.target == document.getElementById("dtl_btn")) {
  55.       let selector = document.getElementById("dtl_sel").value;
  56.       let hasTag = document.getElementById("hasTag").checked;
  57.       let ischild_sel = document.getElementById("ischild_sel").checked;
  58.  
  59.       if (selector.length > 0) {
  60.         DomToLess(selector, hasTag, ischild_sel)
  61.       } else {
  62.         DomToLess("body", hasTag, ischild_sel)
  63.       }
  64.  
  65.     }
  66.   })
  67.   document.addEventListener("keydown", function (event) {
  68.  
  69.  
  70.     // 保存
  71.     // if (event.keyCode == 13 && document.activeElement == document.getElementById("dtl_sel")) {
  72.     if (event.keyCode == 13 && event.target == document.getElementById("dtl_sel")) {
  73.  
  74.       let selector = document.getElementById("dtl_sel").value;
  75.       let hasTag = document.getElementById("hasTag").checked;
  76.       let ischild_sel = document.getElementById("ischild_sel").checked;
  77.  
  78.       if (selector.length > 0) {
  79.         DomToLess(selector, hasTag, ischild_sel)
  80.       } else {
  81.         DomToLess("body", hasTag, ischild_sel)
  82.       }
  83.     }
  84.  
  85.     // 快捷鍵打開
  86.     if (event.ctrlKey == true && event.keyCode == 81) {
  87.       event.preventDefault();
  88.       DomToLess_box.classList.add("active");
  89.       setTimeout(() => {
  90.         document.getElementById("dtl_sel").focus();
  91.       }, 100)
  92.     }
  93.  
  94.   })
  95.  
  96.  
  97.  
  98.  
  99.  
  100.   /**
  101.   * 函數接收三個參數
  102.   * selector：選擇器
  103.   * obj：對象
  104.   * formatchar：.的臨時標識
  105.   * **/
  106.  
  107.   function findChild({ selector, obj, fchar1, fchar2, hasTag }) {
  108.     let elem = selector;
  109.     if (typeof selector == "string") {
  110.       elem = document.querySelector(selector)
  111.     }
  112.  
  113.     if (elem != null && elem.children.length > 0) {
  114.  
  115.       for (let i = 0; i < elem.children.length; i++) {
  116.         let child = elem.children[i];
  117.         let childsel = '';
  118.         let not_tagList = ["STYLE", "SCRIPT", "BR", "HR", "LINK", "NOSCRIPT", "EM", "STRONG", "TITLE", "META"]
  119.         if (not_tagList.indexOf(child.nodeName) < 0) {
  120.           // 判斷是否需要添加“>”
  121.           if (fchar2 != undefined) {
  122.             // 拼接“>”
  123.             childsel += fchar2;
  124.           }
  125.           // 判斷是否需要添加標簽
  126.           if (!hasTag) {
  127.             if (child.classList.length == 0 && child.id == '') {
  128.               // 拼接标签
  129.               childsel += child.localName;
  130.             }
  131.           } else {
  132.             childsel += child.localName;
  133.           }
  134.  
  135.           // 拼接ID
  136.           if (child.id !== '') {
  137.             childsel += `$${child.id}`;
  138.           }
  139.  
  140.           // 拼接Class
  141.           if (child.classList.length > 0) {
  142.             let not_classList = ["j-min", "j-100", "z-0", "z-1", "z-2"];
  143.             child.classList.forEach(classname => {
  144.               let re = /[x|s|m|l][s|m|d|g|l][\-]\d{1,3}/g;
  145.               if (not_classList.indexOf(classname) < 0 && !re.test(classname)) {
  146.                 childsel += `${fchar1 + classname}`;
  147.               } else {
  148.                 if (childsel.length == 0) {
  149.                   childsel += child.localName
  150.                 }
  151.               }
  152.             })
  153.           }
  154.           if (obj[childsel] == undefined) {
  155.             obj[childsel] = {};
  156.             findChild({ selector: child, obj: obj[childsel], fchar1, fchar2, hasTag })
  157.           } else {
  158.             findChild({ selector: child, obj: obj[childsel], fchar1, fchar2, hasTag })
  159.           }
  160.  
  161.         }
  162.       }
  163.  
  164.       return {
  165.         [selector]: obj
  166.       }
  167.     } else {
  168.       return false
  169.     }
  170.   }
  171.  
  172.   /**
  173.   * 函數接收一個參數
  174.   * selector：選擇器
  175.   * **/
  176.   function DomToLess(selector, hasTag, ischild_sel) {
  177.     // 两个随机字符串
  178.     let fchar1 = "fchar1" + Date.now()
  179.     let replaceList = ["$", '"', ':', ',', fchar1];
  180.  
  181.     // 參數列表
  182.     let argument = {
  183.       selector,
  184.       obj: {},
  185.       fchar1,
  186.       hasTag,
  187.     }
  188.  
  189.     // 如果要使用子選擇器，就執行
  190.     let fchar2 = '';
  191.     if (ischild_sel) {
  192.       fchar2 = "fchar2" + Date.now()
  193.       replaceList.push(fchar2);
  194.       argument['fchar2'] = fchar2;
  195.     }
  196.  
  197.     let selectorList = findChild(argument);
  198.     if (selectorList) {
  199.       // 转字符串
  200.       let str = JSON.stringify(selectorList)
  201.  
  202.       // 格式化
  203.       replaceList.forEach(rep => {
  204.         if (rep == '$') {
  205.           str = str.replaceAll(rep, "#")
  206.         } else if (rep == fchar1) {
  207.           str = str.replaceAll(rep, ".")
  208.         } else if (ischild_sel && rep == fchar2) {
  209.           str = str.replaceAll(rep, ">")
  210.         } else {
  211.           str = str.replaceAll(rep, "")
  212.         }
  213.       })
  214.       str = str.substring(1)
  215.       str = str.substring(0, str.length - 1);
  216.       document.getElementById("dtl_textarea").value = str;
  217.  
  218.       // 对焦及选中
  219.       setTimeout(() => {
  220.         document.getElementById("dtl_textarea").focus();
  221.         document.getElementById("dtl_textarea").select();
  222.  
  223.         // 复制
  224.         var copy = document.execCommand('copy');
  225.         if (copy) {
  226.           setTimeout(() => {
  227.             //alert("已复制")
  228.             DomToLess_box.classList.remove(`active`);
  229.             document.getElementById("dtl_sel").value = '';
  230.             document.getElementById("dtl_textarea").value = '';
  231.           }, 50)
  232.         } else {
  233.           setTimeout(() => {
  234.             alert("复制失败，请手动复制！")
  235.           }, 50)
  236.         }
  237.       }, 50)
  238.  
  239.     } else {
  240.       alert("沒找到！");
  241.       document.getElementById("dtl_sel").value = '';
  242.       document.getElementById("dtl_textarea").value = '';
  243.     }
  244.  
  245.   }
  246.  
  247. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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