漫步雲端的鍵盤手

今天遇到一個需求是，當使用者點擊某色塊按鈕轉頁時，要更新轉頁動畫的背景顏色

因為UI工程師是以 :before :after 等CSS 偽元素來做此轉頁效果

動作的部分是做當點擊按鈕時，先去取得當前按鈕的顏色資訊，然後再去修改背景色碼。

首先在頁面上新增 style 區塊

<style id="css"></style>

JS:

$(document).ready(function () {
  $("a.hp-links-item").on("click", function () {
    ///alert($(this).children(".deco-s").css("border-color"));
    SetBodyTransferColor($(this).children(".deco-s").css("border-color"))
  });
});

function SetBodyTransferColor(colorCode) {
  $("#css").get(0).sheet.insertRule("body::before{background-color:" + colorCode + ";!important}", 0);
  $("#css").get(0).sheet.insertRule("body::after{background-color:" + colorCode + ";!important}", 0);
}