即時操作 CSS - cssjson.js

上一篇本來想寫個操作所有 CSS 的程式, 卻發現只要在不同網域其實是無法修改的，最簡單的方式還是用新的取代舊的，而 CSS 的設計又有點奇怪，刪除就是該設定全部刪掉了，既然如此，就來寫一個加強版的CSS 工具，用 json 來操作 CSS 原始碼 : https://github.com/yiharng/cssjson 首先先加入 cssjson.js ``` <script src="https://yiharng.github.io/cssjson.min.js"></script> ``` # 使用方式 ``` var rc=cssjson();//在 head 新增一個 style var rc=cssjson("body");//在 body 新增一個 style var rc=cssjson("style");//使用目前網頁中的第一個 style var rc=cssjson("#objid");//使用 id 為 objid 的 style ``` # Functions ``` rc.list() //列出所有的 css 名稱 rc.list(".tag") //取得 .tag 的索引位置 rc.get(".tag") //取得 .tag 的 CSS 設定，以 json 型態回傳 key=rc.get("@key") //取得 @keyframes 名稱為 key 的 CSS 設定 rc.set(".tag",{color:"#f00"}) //新增或取代 .tag 中的 css 設定 rc.set(".tag","{color:#f00}") //以字串中的設定取代原來的所有設定 rc.del(".tag")//刪除 .tag key.list() //列出所有的 keyframes key.get("100%") //取得該 frame 的設定，以 json 型態回傳 key.set("100%",{background-color:"#00f"}) //新增或取代 frame 的設定 key.del("100%") // 刪除 frame ``` 這裡寫了一個簡單的範例，用這樣來操作 CSS 方便多了 ``` $mmcode(r1) ``` <div class="mmresult r1"> <style id="a07031_id"> .a07031_c1::before { content:"[我是Before] "; color:#00aa00; } button { font-size:1em; } @keyframes a07031_a1 { 0% { transform:translate(0em,0em); } 100% { transform:translate(10em,0em); } } </style> <div class="a07031_c1">內容</div> <br> <br> <br> <button id="a07031_b1">更改 before</button> <button id="a07031_b2">新增 after</button> <button id="a07031_b3">新增動畫</button> <button id="a07031_b4">修改動畫</button> <script src="https://yiharng.github.io/cssjson.min.js"></script> <script> (function() { var rc=cssjson("#a07031_id"); $("#a07031_b1").on("click",()=> { rc.set(".a07031_c1::before",{color:"#05f"}); }); $("#a07031_b2").on("click",()=> { rc.set(".a07031_c1::after",{content:'" [我是After]"',color:"#f0a"}); }); $("#a07031_b3").on("click",()=> { rc.set(".a07031_c1",{animation:"a07031_a1 3s 0s ease infinite"}); }); $("#a07031_b4").on("click",()=> { let k=rc.get("@a07031_a1"); if (k.get("50%")) { k.set("50%",null); // k.del("50%"); 也可以 } else { k.set("50%",{transform:"translate(5em,2em)"}); } }); })(); </script> </div>