上一篇本來想寫個操作所有 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 方便多了
<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>
內容
沒有留言:
張貼留言