当前位置：首页 > article >正文

【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库，油猴脚本css库的使用

article 2024/11/15 4:52:37

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库，油猴脚本css库的使用
📚一、效果
📚二、核心解析
- 💡1.引入css库：
- 💡2.授予权限：
- 💡3.添加到页面：
📚三、源代码，上代码，可以直接复制使用
- ✍️JavaScript
📚四、使用此代码

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

【油猴脚本】00003案例 Tampermonkey油猴脚本引入css 库，油猴脚本css库的使用

📚一、效果

原表格

原表格描述

美化后的表格

美化后的表格描述

，使用了bootstrap.css 还具有响应式

美化后有响应式的表格

📚二、核心解析

💡1.引入css库：

引入bootstrap.css库，并命名一个别名 bootstrapCss

// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

💡2.授予权限：

授予获取css库的权限

// @grant        GM_getResourceText

授予添加css库的权限

// @grant        GM_addStyle

💡3.添加到页面：

  let bsCss = GM_getResourceText('bootstrapCss') //通过别名获取bootstrap.css
  GM_addStyle(bsCss)  //添加到页面

📚三、源代码，上代码，可以直接复制使用

✍️JavaScript

// ==UserScript==
// @name         插入一个表格-
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  一个简单的油猴脚本
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
// @require      https://code.jquery.com/jquery-1.9.1.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// ==/UserScript==


(function () {
  'use strict';

  let tableHtml = `
    <div class="col-md-8 table-card" style="padding:1em;">
     <div class="table-responsive">
      <table class="table table-bordered table-striped" id="test_table">
       <thead>
        <tr>
         <td>序号</td>
         <td>姓名</td>
         <td>省份</td>
         <td>城市</td>
         <td>性别</td>
         <td>职业</td>
         <td>年龄</td>
        </tr>
       </thead>
       <tbody><tr><td>1</td><td>杨柳柳</td><td>四川</td><td>成都</td><td>男</td><td>学生</td><td>16</td></tr><tr><td>2</td><td>秦晓</td><td>四川</td><td>江油</td><td>男</td><td>学生</td><td>22</td></tr><tr><td>3</td><td>宇峰</td><td>XX</td><td>重庆</td><td>女</td><td>银行职员</td><td>24</td></tr><tr><td>4</td><td>青玉</td><td>河北</td><td>石家庄</td><td>男</td><td>java工程师</td><td>21</td></tr></tbody>
      </table>
     </div>
    </div>
    `
  let cssMore = `
  #draggableArea{padding:10px;background:#f5f5f5;}
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
  `
  let bsCss = GM_getResourceText('bootstrapCss')
  GM_addStyle(bsCss)
  GM_addStyle(cssMore)
  $('body').append(tableHtml)





  // Your code here...
})();

📚四、使用此代码

1.浏览器打开👉 https://developer.mozilla.org/zh-CN/
2.把代码复制进油猴脚本，打开运行开关，刷新页面

安装教程：👉 https://blog.csdn.net/qq_33650655/article/details/142097760
使用教程：👉 https://blog.csdn.net/qq_33650655/article/details/142183047