Newer
Older
jstrr / change.js
document.addEventListener("DOMContentLoaded", () => {
    var head = document.querySelector("head");
    var newcss;
    let cssbtn1 = document.getElementById("css1");
    let cssbtn2 = document.getElementById("css2");
    let cssbtn3 = document.getElementById("css3");
    let cssbtn4 = document.getElementById("css4");
    let cssbtn5 = document.getElementById("css5");
    
    cssbtn1.addEventListener("click", (e) => {  
        if (newcss) return;
        newcss = document.createElement("link");
        newcss.rel = "stylesheet";
        newcss.href = "new2.css";
        head.appendChild(newcss);	// link要素を追加
        });

    cssbtn2.addEventListener("click", (e) => {  
        if (newcss) return;
        newcss = document.createElement("link");
        newcss.rel = "stylesheet";
        newcss.href = "new3.css";
        head.appendChild(newcss);	// link要素を追加
        });

    cssbtn3.addEventListener("click", (e) => {  
            if (newcss) return;
            newcss = document.createElement("link");
            newcss.rel = "stylesheet";
            // ※newcss.title = "あとから版";	// title属性入れると代替CSSに
            newcss.href = "new4.css";
            head.appendChild(newcss);	// link要素を追加
            });

            cssbtn4.addEventListener("click", (e) => {  
                if (newcss) return;
                newcss = document.createElement("link");
                newcss.rel = "stylesheet";
                newcss.href = "new5.css";
                head.appendChild(newcss);	// link要素を追加
                });

            cssbtn5.addEventListener("click", (e) => {  
                    if (newcss) return;
                    newcss = document.createElement("link");
                    newcss.rel = "stylesheet";
                    newcss.href = "new6.css";
                    head.appendChild(newcss);	// link要素を追加
                    });

        let unlbtn = document.getElementById("unl");
        unlbtn.addEventListener("click", (e) => {
            if (newcss) {
                newcss.remove();
                newcss = null;
            }
        }); 
});