clear light bulb planter on gray rock

記録

CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors

おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。

今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。

<link rel="stylesheet" href="examplestyle.css">

導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。

<span id="site_description"></span>

最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。

let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");

const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
    let r = document.cookie.split(';');
    return r.length ? ((r) => {
        let changecolor = "";
        for (let ii = 0; ii < r.length; ii++) {
            let content = r[ii].split('=');
            for (let i = 0; i < content.length; i++) {
                if (content[i].replaceAll(" ", "") === "bgcolor_code") {
                    changecolor = content[i + 1];
                }
            }
        }
        return changecolor?changecolor:CodeColor;
    })(r) : CodeColor;
};

let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
    elm.addEventListener("click", function (e) {
        color_set(elm.getAttribute("data-color-code"));
    });
});

color_set(old_color);

function color_set(color) {
    for (let ii = 0; ii < document.styleSheets.length; ii++) {
        if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
            for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
                let element_css_code = document.styleSheets[ii].cssRules[i];
                try {
                    element_css_code.style.backgroundColor = color;
                    if (color === "#efefef") {
                        element_css_code.style.color = "#000000";
                        
                    } else {
                        element_css_code.style.color = "#FFFFFF";
                    }
//いらないかも領域🤔👇
                    document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
                        elm.style.backgroundColor = "#909091";
                    });
                    document.getElementById("searchsubmit").style.backgroundColor = "#000";
                    document.querySelector("#s").style.backgroundColor = "#909091";
                    [...document.querySelectorAll("code")].forEach(elm=>{
                        [...elm.querySelectorAll("span")].forEach(childen_elm=>{
                            childen_elm.style.backgroundColor = "#565656";
                        });
                    });
//いらないかも領域🤔👆                    
                } catch (error) {
                }
            }

            document.cookie = "bgcolor_code=" + color;
        }
    }
}

注意事項:背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

ブログ記事を書く作業/一コマ(キーボードが弾まない) #blog #vlog前のページ

30万件のデータを扱っている方の話を聞いて一瞬😱となる。 #laravel #Queue #worker #jobs次のページ

関連記事

  1. 記録

    仁淀川町観光協会の対応がいい加減な件?それとも?

    仁淀川町観光協会.tvの対応がいい加減な件。仁淀川町観光協会のリス…

  2. 記録

    格安スマホ・SIMで毎月1500円パケット通信使い放題なんですけどね。

    格安スマホ・SIMで毎月1500円パケット通信使い放題なんですけどね…

  3. 記録

    feedlyを有料化しましたよ。

    feedlyを有料化しましたよ。有料版にするメリットは実はあまりない…

  4. 記録

    PHP8になって厳格になった、後任ごめんなさい。書いてないです。static…

    今日は9.11同時多発テロが起きた日です、ご冥福をお祈りします。もう…

  5. 記録

    あるキーワードをライクするTwitter API。

    さくらレンタルサーバー、もともとmecab(メカブ)が入って…

  6. 記録

    jaxaの初任給が破格のお値段

    https://www.youtube.com/watch?v=n…

2022年11月
 123456
78910111213
14151617181920
21222324252627
282930  

カテゴリー

アーカイブ

PAGE TOP