0

質問の要点を分かりやすくするために、ソースコードを簡略化しました。
サイト関係者に迷惑をかけまして、申し訳ありませんでした。

質問ですが、画面を見ていただけると分かりますが、selectのそれぞれのカラーボタン(D・F・H・M・S)を同一色に押した場合、時計全体の色を付けるCボタンそのものの色も同じになるように設定したいのです。1つでも違う色が設定されれば、Cボタンは白になるように設定しています。

もう1つの質問は、一度時計を消したら、好みに設定した時計の色をその背景色のときの初期の状態に戻すようにしたいのです。
ソースコードでは、背景色がsilverのときの初期の時計の色は"mediumblue",背景色がmediumblueのときの初期の時計の色は"black",背景色が"black"のときの初期の時計の色は"silver"と設定しています。

2つの質問とも"ifの条件式"で組み立てる必要があると思いますが、うまくいかなくて頭が混乱しています。ご教示お願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title></title>

    <style type="text/css">
    <!--
    .butt {
        BACKGROUND:maroon; 
        COLOR:gold;
    }
    #clock {
        color:silver;
    }
    #clockCOLOR {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    #color1 {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    #color2 {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    #color3 {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    #color4 {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    #color5 {
        background:lightpink;
        background-color:silver;
        color:black;
    }
    //-->
    </style>

    <script type="text/javascript"> 
    <!--
    function bg1() {
        document.bgColor = "silver";
        document.getElementById('Od').style.color='mediumblue';
        document.getElementById('Of').style.color='mediumblue';
        document.getElementById('Oh').style.color='mediumblue';
        document.getElementById('Om').style.color='mediumblue';
        document.getElementById('Os').style.color='mediumblue';
        document.getElementById("clockCOLOR").style.background="mediumblue";
        document.getElementById("color1").style.background="mediumblue";
        document.getElementById("color2").style.background="mediumblue";
        document.getElementById("color3").style.background="mediumblue";
        document.getElementById("color4").style.background="mediumblue";
        document.getElementById("color5").style.background="mediumblue";
    }
    function bg2() {
        document.bgColor = "mediumblue";
        document.getElementById('Od').style.color='black';
        document.getElementById('Of').style.color='black';
        document.getElementById('Oh').style.color='black';
        document.getElementById('Om').style.color='black';
        document.getElementById('Os').style.color='black';
        document.getElementById("clockCOLOR").style.background="black";
        document.getElementById("color1").style.background="black";
        document.getElementById("color2").style.background="black";
        document.getElementById("color3").style.background="black";
        document.getElementById("color4").style.background="black";
        document.getElementById("color5").style.background="black";
    }
    function bg3() {
        document.bgColor = "black";
        document.getElementById('Od').style.color='silver';
        document.getElementById('Of').style.color='silver';
        document.getElementById('Oh').style.color='silver';
        document.getElementById('Om').style.color='silver';
        document.getElementById('Os').style.color='silver';
        document.getElementById("clockCOLOR").style.background="silver";
        document.getElementById("color1").style.background="silver";
        document.getElementById("color2").style.background="silver";
        document.getElementById("color3").style.background="silver";
        document.getElementById("color4").style.background="silver";
        document.getElementById("color5").style.background="silver";
    }
    //-->
    </script>

    <script type="text/javascript">
    <!--
    function clockCOLOR1() {
        document.getElementById("Od").style.color="silver";
        document.getElementById("Of").style.color="silver";
        document.getElementById("Oh").style.color="silver";
        document.getElementById("Om").style.color="silver";
        document.getElementById("Os").style.color="silver";
        document.getElementById("clockCOLOR").style.background="silver";
        document.getElementById("color1").style.background="silver";
        document.getElementById("color2").style.background="silver";
        document.getElementById("color3").style.background="silver";
        document.getElementById("color4").style.background="silver";
        document.getElementById("color5").style.background="silver";
    }
    function clockCOLOR2() {
        document.getElementById("Od").style.color="mediumblue";
        document.getElementById("Of").style.color="mediumblue";
        document.getElementById("Oh").style.color="mediumblue";
        document.getElementById("Om").style.color="mediumblue";
        document.getElementById("Os").style.color="mediumblue";
        document.getElementById("clockCOLOR").style.background="mediumblue";
        document.getElementById("color1").style.background="mediumblue";
        document.getElementById("color2").style.background="mediumblue";
        document.getElementById("color3").style.background="mediumblue";
        document.getElementById("color4").style.background="mediumblue";
        document.getElementById("color5").style.background="mediumblue";
    }
    function clockCOLOR3() {
        document.getElementById("Od").style.color="black";
        document.getElementById("Of").style.color="black";
        document.getElementById("Oh").style.color="black";
        document.getElementById("Om").style.color="black";
        document.getElementById("Os").style.color="black";
        document.getElementById("clockCOLOR").style.background="black";
        document.getElementById("color1").style.background="black";
        document.getElementById("color2").style.background="black";
        document.getElementById("color3").style.background="black";
        document.getElementById("color4").style.background="black";
        document.getElementById("color5").style.background="black";
    }
    function Col11() {
        document.getElementById("Od").style.color="silver";
        document.getElementById("color1").style.background="silver";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col12() {
        document.getElementById("Od").style.color="mediumblue";
        document.getElementById("color1").style.background="mediumblue";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col13() {
        document.getElementById("Od").style.color="black";
        document.getElementById("color1").style.background="black";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col21() {
        document.getElementById("Of").style.color="silver";
        document.getElementById("color2").style.background="silver";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col22() {
        document.getElementById("Of").style.color="mediumblue";
        document.getElementById("color2").style.background="mediumblue";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col23() {
        document.getElementById("Of").style.color="black";
        document.getElementById("color2").style.background="black";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col31() {
        document.getElementById("Oh").style.color="silver";
        document.getElementById("color3").style.background="silver";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col32() {
        document.getElementById("Oh").style.color="mediumblue";
        document.getElementById("color3").style.background="mediumblue";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col33() {
        document.getElementById("Oh").style.color="black";
        document.getElementById("color3").style.background="black";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col41() {
        document.getElementById("Om").style.color="silver";
        document.getElementById("color4").style.background="silver";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col42() {
        document.getElementById("Om").style.color="mediumblue";
        document.getElementById("color4").style.background="mediumblue";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col43() {
        document.getElementById("Om").style.color="black";
        document.getElementById("color4").style.background="black";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col51() {
        document.getElementById("Os").style.color="silver";
        document.getElementById("color5").style.background="silver";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col52() {
        document.getElementById("Os").style.color="mediumblue";
        document.getElementById("color5").style.background="mediumblue";
        document.getElementById("clockCOLOR").style.background="white";
    }
    function Col53() {
        document.getElementById("Os").style.color="black";
        document.getElementById("color5").style.background="black";
        document.getElementById("clockCOLOR").style.background="white";
    }
    //-->
    </script>
  </head>

  <body bgcolor="black">
    <div id="clock" style="visibility:hidden">
      <div id="Od" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
      </div>
      <div id="Of" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
      </div>
      <div id="Oh" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
      </div>
      <div id="Om" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
      </div>
      <div id="Os" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
      </div>
    </div>

    <script type="text/javascript">

    (function() {
        "use strict";

        function $(sel) {
            return document.getElementById(sel);
        }   

        function $$(sel) {
          if (typeof document.getElementsByClassName === 'undefined') {
              return document.getElementsByName(sel);
          }
          return document.getElementsByClassName(sel);
        }

        var dCol = '', //date colour.
            sCol = '', //seconds colour.
            mCol = '', //minutes colour.
            hCol = '', //hours colour.
            fCol = '', //face color
            ClockHeight = 40,
            ClockWidth = 40,
            ClockFromMouseY = 0,
            ClockFromMouseX = 100,
            d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            date = new Date(),
            day = date.getDate(),
            year = date.getYear() + 1900;

        var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
        var D = TodaysDate.split('');
        var H = '...';
        H = H.split('');
        var M = '....';
        M = M.split('');
        var S = '.....';
        S = S.split('');
        var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
            font = 'Helvetica, Arial, sans-serif',
            size = 1,
            speed = 0.6;
        Face = Face.split(' ');
        var n = Face.length;
        var a = size * 10;
        var ymouse = 0,
            xmouse = 0,
            scrll = 0,
            props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
            props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
        var Split = 360 / n;
        var Dsplit = 360 / D.length;
        var HandHeight = ClockHeight / 4.5; 
        var HandWidth = ClockWidth / 4.5;
        var HandY = -7,
            HandX = -2.5,
            step = 0.06,
            currStep = 0,
            y = [],
            x = [],
            Y = [],
            X = [],
            Dy = [],
            Dx = [],
            DY = [],
            DX = [];
        var i;

        for (i = 0; i < n; i++) {
            y[i] = 0;
            x[i] = 0;
            Y[i] = 0;
            X[i] = 0;
        }

        for (i = 0; i < D.length; i++) {
            Dy[i] = 0;
            Dx[i] = 0;
            DY[i] = 0;
            DX[i] = 0;
        }

        var wrapper = $('clock');
        var html = ''

        // Date wrapper
        html = '';
        for (i = 0; i < D.length; i++) {
            html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
        }
        $('Od').children[0].innerHTML = html;

        // Face wrapper
        html = '';
        for (i = 0; i < n; i++) {
            html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
        }
        $('Of').children[0].innerHTML = html;

        // Hours wrapper
        html = '';
        for (i = 0; i < H.length; i++) {
            html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
        } 
        $('Oh').children[0].innerHTML = html;

        // Minute wrapper
        html = '';
        for (i = 0; i < M.length; i++) {
            html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';
        } 
        $('Om').children[0].innerHTML = html;

        // Seconds wrapper
        html = '';
        for (i = 0; i < S.length; i++) {
            html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';
        } 
        $('Os').children[0].innerHTML = html;

        // Mouse move event handler
        function Mouse(evnt) {
            if (typeof evnt === 'undefined') {
                ymouse = event.Y + ClockFromMouseY;
                xmouse = event.X + ClockFromMouseX;
            } else {
                ymouse = evnt.clientY + ClockFromMouseY;
                xmouse = evnt.clientX + ClockFromMouseX;
            }
        }

        document.onmousemove = Mouse;

        function ClockAndAssign() {
            var time = new Date();
            var secs = time.getSeconds();
            var sec = -1.57 + Math.PI * secs / 30;
            var mins = time.getMinutes();
            var min = -1.57 + Math.PI * mins / 30;
            var hr = time.getHours();
            var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;

            $('Od').style.top = window.document.body.scrollTop;
            $('Of').style.top = window.document.body.scrollTop;
            $('Oh').style.top = window.document.body.scrollTop;
            $('Om').style.top = window.document.body.scrollTop;
            $('Os').style.top = window.document.body.scrollTop;

            for (i = 0; i < n; i++) {
                var F = $$('Face')[i];
                F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
                F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
            }

            for (i = 0; i < H.length; i++) {
                var HL = $$('Hours')[i];
                HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
                HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
            }

            for (i = 0; i < M.length; i++) {
                var ML = $$('Minutes')[i].style;
                ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
                ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
            }

            for (i = 0; i < S.length; i++) {
                var SL = $$('Seconds')[i].style;
                SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
                SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
            }

            for (i = 0; i < D.length; i++) {
                var DL = $$('Date')[i].style;
                DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
                DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
            }
            currStep -= step;
        }

        function Delay() {
            scrll = 0;
            Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
            Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
            for (i = 1; i < D.length; i++) {
                Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
                Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
            }
            y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
            x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
            for (i = 1; i < n; i++) {
                y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
                x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
            }
            ClockAndAssign();
            setTimeout(Delay, 20);
        }
        Delay();
    }());

    num = 1;
    function toggle() {
        num ^= 1; 
        if(num == 1){
            document.getElementById('clock').style.visibility="hidden";
            document.getElementById('clockCOLOR').disabled=true;
            document.getElementById('color1').disabled=true;
            document.getElementById('color2').disabled=true;
            document.getElementById('color3').disabled=true;
            document.getElementById('color4').disabled=true;
            document.getElementById('color5').disabled=true;
        } else {
            document.getElementById('clock').style.visibility="visible";
            document.getElementById('clockCOLOR').disabled=false;
            document.getElementById('color1').disabled=false;
            document.getElementById('color2').disabled=false;
            document.getElementById('color3').disabled=false;
            document.getElementById('color4').disabled=false;
            document.getElementById('color5').disabled=false;
        }
        document.getElementById("tog").value = num ?" REVIVE ":"KILL(切る)";
    }
    //-->
    </script>

    <div style="text-align:center;">
      <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
      COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: silver"
      onclick="bg1()" type="button" value="&#13;&#10;">
      <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
      COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: mediumblue"
      onclick="bg2()" type="button" value="&#13;&#10;">
      <INPUT style="BORDER-RIGHT: grey 1px solid; BORDER-TOP:grey 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: grey 1px solid; 
      COLOR: black; BORDER-BOTTOM: grey 1px solid; FONT-FAMILY: ms gothic; BACKGROUND-COLOR: black"
      onclick="bg3()" type="button" value="&#13;&#10;">
    </div>
    <br>
    <div style="text-align:center;">
      <select id="clockCOLOR" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="clockCOLOR1()">C</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="clockCOLOR2()">C</option>
        <option style="background-color:black;font-weight:bold" onclick="clockCOLOR3()">C</option> 
      </select>
      <select id="color1" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="Col11()">D</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="Col12()">D</option>
        <option style="background-color:black;font-weight:bold" onclick="Col13()">D</option>
      </select>
      <select id="color2" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="Col21()">F</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="Col22()">F</option>
        <option style="background-color:black;font-weight:bold"  onclick="Col23()">F</option>
      </select>
      <select id="color3" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="Col31()">H</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="Col32()">H</option>
        <option style="background-color:black;font-weight:bold" onclick="Col33()">H</option>
      </select>
      <select id="color4" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="Col41()">M</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="Col42()">M</option>
        <option style="background-color:black;font-weight:bold" onclick="Col43()">M</option>
      </select>
      <select id="color5" disabled>
        <option style="background-color:silver;font-weight:bold" onclick="Col51()">S</option>
        <option style="background-color:mediumblue;font-weight:bold" onclick="Col52()">S</option>
        <option style="background-color:black;font-weight:bold" onclick="Col53()">S</option>
      </select>
      <input id="tog" class="butt" type="button" value="出現" onclick="toggle()">
    </div>
  </body>
</html>

1 件の回答 1

1

もう少しコードを削りシンプルな質問にした方が回答が得られやすいかと思います。
時計の機能を削った物をコードスニペットとして付けましたので、参考にして下さい。

書き捨ての物ですので、グーバル変数の多用や、HTML中のコードの記述などよくない点が多いですが、以下の2点は参考になるかと思います。

  1. 色の変更を、style.color などで逐次指定するのではなくdata属性やクラスの切り替えで行なっている点
    今回は data-theme という属性を作り、これを切り替えています。
    [data-theme="テーマ名"]という形式のCSSセレクタで選択できますので、これにスタイルを当てます。

  2. 状態の更新を一箇所に集めている点
    時計のテーマと、select要素の状態(select要素自体のテーマ、選択されているoption要素)の更新はset_theme関数にまとめています。
    指定された時計の各要素にテーマを当てたあと、時計のテーマを各select要素に反映する処理が毎回確実に入ります。

"use strict";
var clock_parts = [$hour, $minute, $second];
var clock_part_setters = [$hour_setter, $minute_setter, $second_setter];

function for_each(array, func){ Array.prototype.forEach.call(array, func); }

function get_theme(event){
	return event.target.options[event.target.selectedIndex].dataset.theme;
}

function select_option(select_elm, theme){
	select_elm.dataset.theme = theme;
  	// IE hack
	select_elm.className = select_elm.className;

	for_each(select_elm.options, function(option_elm){
		if(option_elm.dataset.theme == theme){
			option_elm.selected = true;
		}
	});
}

function set_theme(elms, theme){
	for_each(elms, function(elm){
		elm.dataset.theme = theme;
		// IE hack
		elm.className = elm.className;

	});

	// update clock_part_setters
	for_each(clock_parts, function(part, i){
		select_option(clock_part_setters[i], part.dataset.theme);
	});

	// update $clock_setter
	var is_same_theme = clock_parts.every(function(part){
		return part.dataset.theme == clock_parts[0].dataset.theme;
	});
	if(is_same_theme){
		$clock_setter_none.hidden = true;
		select_option($clock_setter, clock_parts[0].dataset.theme);
	}
	else{
		$clock_setter_none.hidden = false;
		select_option($clock_setter, "white");
	}
}

function match_theme(){
	var theme_table = {
		// back_theme: "clock_theme",
		silver: "blue",
		blue: "black",
		black: "silver",
	};
	set_theme(clock_parts, theme_table[$back.dataset.theme]);
}
[data-theme="silver"]{ color: black; background-color: silver; }
[data-theme="blue"]{ color: white; background-color: blue; }
[data-theme="black"]{ color: white; background-color: black; }
[data-theme="white"]{ color: black; background-color: white; }

#\$clock{ font-size: xx-large; }
<body id="$back" data-theme="silver">
	<div id="$clock">
		<span id="$hour" data-theme="blue">HH時</span>
		<span id="$minute" data-theme="blue">MM分</span>
		<span id="$second" data-theme="blue">SS秒</span>
	</div>

	<button onclick="$clock.hidden = !$clock.hidden; event.target.textContent = $clock.hidden ? 'Show' : 'Hide'; match_theme();"
			data-theme="white">
		Hide</button>
	<br />

	<button data-theme="silver" onclick="set_theme([$back], 'silver'); match_theme();">
		Silver</button>
	<button data-theme="blue" onclick="set_theme([$back], 'blue'); match_theme();">
		Blue</button>
	<button data-theme="black" onclick="set_theme([$back], 'black'); match_theme();">
		Black</button>
	<br />

	Clock:
	<select id="$clock_setter" data-theme="blue" autocomplete="off"
			onchange="set_theme(clock_parts, get_theme(event));">
		<option data-theme="silver"> Silver</option>
		<option data-theme="blue" selected> Blue </option>
		<option data-theme="black"> Black </option>
		<option id="$clock_setter_none" data-theme="white" hidden> --- </option>
	</select>
	Hour:
	<select id="$hour_setter" data-theme="blue" autocomplete="off"
			onchange="set_theme([$hour], get_theme(event));">
		<option data-theme="silver"> Silver </option>
		<option data-theme="blue" selected> Blue </option>
		<option data-theme="black"> Black </option>
	</select>
	Minute:
	<select id="$minute_setter" data-theme="blue" autocomplete="off"
			onchange="set_theme([$minute], get_theme(event));">
		<option data-theme="silver"> Silver </option>
		<option data-theme="blue" selected> Blue </option>
		<option data-theme="black"> Black </option>
	</select>
	Second:
	<select id="$second_setter" data-theme="blue" autocomplete="off"
			onchange="set_theme([$second], get_theme(event));">
		<option data-theme="silver"> Silver </option>
		<option data-theme="blue" selected> Blue </option>
		<option data-theme="black"> Black </option>
	</select>
</body>

12
  • 回答をありがとうございました。 プロ向け本格的なソースコードとなっていて分かりにくいですが、時計と背景色,ボタンが希望通りにリンクされています。 参考にします。 ここで新たな疑問が生じたのですが、画面のエリア外にマウスポインターを移動しないと、それぞれのボタンが機能しないのは、なぜでしょうか?
    – user9359
    2015年10月11日 11:04
  • 「ボタンが機能しない」というのはこの回答の「スニペットを実行」でのことでしょうか。「画面のエリア外」というのはウィンドウの外という事でしょうか。手元のFirefox, Chromeでは動作しているので、どういう現象か分かりません。
    – mjy
    2015年10月11日 11:34
  • 「スニペットを実行」です。 今Chromeで試したところ動作しましたが、IEでは動作しないようです。
    – user9359
    2015年10月11日 12:15
  • すいません、IEのことは忘れていました。ある程度は動いていたようで、むしろ驚きです。IEを想定する場合はdata属性ではなくクラスを使った方がよいかもしれません(どの道JQueryなどの使用が必要になるでしょう)。せっかくですのでdata属性のままで動くようにしておきました。data属性を変更した後、クラス(className)の変更も行なってスタイルの再計算をうながしています。これでもちょっと古いIEだと動かないと思います。
    – mjy
    2015年10月11日 14:49
  • IEでも動作します。これを応用できるように頑張って見ます。
    – user9359
    2015年10月11日 15:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。