https://www.jwrc-net.or.jp/js/change-color.js

1$(function () {
2	/*------------------------------------
3		文字の設定
4	-------------------------------------*/
5	var key1 = "font";
6	var data1 = localStorage.getItem(key1);
7
8	// 文字サイズの設定
9	//localStorageの準備
10	if (data1 == null) {
11		$("html").css("font-size", "625%;");
12		$("#fontBtn li.middle").addClass("current");
13		// console.log("一番最初の文字が空のとき→" + data1);
14	} else if (data1 == "large") {
15		$("html").css("font-size", "720%");
16		$("#fontBtn li.large").addClass("current");
17		$("body").addClass("fontL");
18	} else if (data1 == "middle") {
19		$("html").css("font-size", "625%");
20		$("#fontBtn li.middle").addClass("current");
21	}
22
23	// 文字サイズボタン押下時の判定
24	$("#fontBtn li").click(function () {
25		$("#fontBtn li").removeClass("current");
26		var fontSize = $(this).attr("class");
27
28		if (fontSize == "large") {
29			data1 = "large";
30			localStorage.setItem(key1, data1);
31
32			$("html").css("font-size", "720%");
33			$("#fontBtn li.large").addClass("current");
34			$("body").addClass("fontL");
35			// console.log("大");
36		} else if (fontSize == "middle") {
37			data1 = "middle";
38			localStorage.setItem(key1, data1);
39
40			$("html").css("font-size", "625%");
41			$("#fontBtn li.middle").addClass("current");
42			$("body").removeClass("fontL");
43			// console.log("中");
44		} /*else {
45			data1 = "small";
46			localStorage.setItem(key1, data1);
47
48			$("html").css("font-size", "525%");
49			$("#fontBtn li.small").addClass("current");
50			// console.log("小");
51		}*/
52	});
53
54	/*------------------------------------
55		色の設定
56	-------------------------------------*/
57	var key2 = "color";
58	var data2 = localStorage.getItem(key2);
59
60	// 色の設定
61	//localStorageの準備
62	if (data2 == null) {
63		$("body").addClass("white");
64		$("#colorBtn li.white").addClass("current");
65		// console.log("一番最初の色が空のとき→" + data2);
66	} else if (data2 == "white") {
67		$("body").addClass("white");
68		$("#colorBtn li.white").addClass("current");
69	} else if (data2 == "black") {
70		$("body").addClass("black");
71		$("#colorBtn li.black").addClass("current");
72	} else if (data2 == "blue") {
73		$("body").addClass("blue");
74		$("#colorBtn li.blue").addClass("current");
75	}
76
77	// 色ボタン押下時の判定
78	$("#colorBtn li").click(function () {
79		$("#colorBtn li").removeClass("current");
80		$("body").removeClass("white");
81		$("body").removeClass("black");
82		$("body").removeClass("blue");
83
84		var allColor = $(this).attr("class");
85
86		if (allColor == "white") {
87			data2 = "white";
88			localStorage.setItem(key2, data2);
89
90			$("body").addClass("white");
91			$("#colorBtn li.white").addClass("current");
92			// console.log("白");
93		} else if (allColor == "black") {
94			data2 = "black";
95			localStorage.setItem(key2, data2);
96
97			$("body").addClass("black");
98			$("#colorBtn li.black").addClass("current");
99			// console.log("黒");
100		} else {
101			data2 = "blue";
102			localStorage.setItem(key2, data2);
103
104			$("body").addClass("blue");
105			$("#colorBtn li.blue").addClass("current");
106			// console.log("青");
107		}
108	});
109});