17735


下記のソースコードは、data-theme属性によりスタイルを切り替えている物です。  
時計と、それに色を付けるためのボタンがあるのですが、  
"ボタンの背景色＝時計の色"のため`<style>`の[data-theme]の"color"を  
"background-color"と同じにしました。  
しかし、そうすると今度はボタンの中の文字色も同じになるため、その文字が  
消えてしまいます。  
ここの矛盾を解決するにはどうしたらいいか、ご教示ください。

[code]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
    <meta charset="utf-8" />
        <title></title>
    
    
    <style>
    [data-theme="black"]{ color: black; background-color:black;}
    [data-theme="blue"]{ color: blue; background-color:blue;}
    [data-theme="silver"]{ color: silver; background-color:silver;}
    [data-theme="white"]{ color: white; background-color:white;}
    
    </style>
    </head>
    
    <body id="back" data-theme="silver">
    
    <button onclick="clock.hidden = !clock.hidden; event.target.textContent = clock.hidden ? 'Show' : 'Hide'; match_theme();" data-theme="white">Hide</button>
    <br>
    <button data-theme="black" onclick="set_theme([back], 'black'); match_theme();">Black</button>
    <button data-theme="blue" onclick="set_theme([back], 'blue'); match_theme();">Blue</button>
    <button data-theme="silver" onclick="set_theme([back], 'silver'); match_theme();">Silver</button>
    <br>
    
    Clock:
    <select id="clock_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme(clock_parts, get_theme(event));">
      <option data-theme="black">Clock</option>
      <option data-theme="blue" selected> Blue </option>
      <option data-theme="silver"> Silver</option>  
      <option id="clock_setter_none" data-theme="white" hidden>--C--</option>
            </select>
    Date:
    <select id="date_setter" data-theme="blue" autocomplete="off"
        onchange="set_theme([Od],get_theme(event));">
        <option data-theme="black"> Black </option>
        <option data-theme="blue" selected> Blue </option>
        <option data-theme="silver"> Silver </option>
        </select>
    Face:
    <select id="face_setter" data-theme="blue" autocomplete="off"
        onchange="set_theme([Of],get_theme(event));">
        <option data-theme="black"> Black </option>
        <option data-theme="blue" selected> Blue </option>
        <option data-theme="silver"> Silver </option>
        </select>
    Hours:
    <select id="hour_setter" data-theme="blue" autocomplete="off"
        onchange="set_theme([Oh],get_theme(event));">
        <option data-theme="black"> Black </option>
        <option data-theme="blue" selected> Blue </option>
        <option data-theme="silver"> Silver </option>
        </select>
    Minutes:
    <select id="minute_setter" data-theme="blue" autocomplete="off"
        onchange="set_theme([Om],get_theme(event));">
        <option data-theme="black"> Black </option>
        <option data-theme="blue" selected> Blue </option>
        <option data-theme="silver"> Silver </option>
        </select>
    Seconds:
    <select id="second_setter" data-theme="blue" autocomplete="off"
        onchange="set_theme([Os],get_theme(event));">
        <option data-theme="black"> Black </option>
        <option data-theme="blue" selected> Blue </option>
        <option data-theme="silver"> Silver </option>
        </select>
    </body>
    
    <div id="clock">
        <div id="Od" data-theme="blue" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
            </div>
        <div id="Of" data-theme="blue" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
            </div>
        <div id="Oh" data-theme="blue" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
            </div>
        <div id="Om" data-theme="blue" style="position:absolute;top:0px;left:0px">
            <div style="position:relative">
            </div>
            </div>
        <div id="Os" data-theme="blue" 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();
    }());
    </script>
    
    <script type="text/javascript">
            "use strict";
    var clock_parts = [Od, Of, Oh, Om, Os];
    var clock_part_setters = [date_setter, face_setter, 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",
            black: "silver",
            blue: "black",
            silver: "blue",
    
        };
        set_theme(clock_parts, theme_table[back.dataset.theme]);
    }
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-10-16T14:45:07.570
17733
2015-10-17T14:16:27.753
2015-10-17T14:16:27.753
3054
9359
question
javascript html
同じ属性が設定されている要素に、スタイルシートで別のスタイルを設定するには？


例えば、  
「id が "clock" の要素の子孫で "data-theme" 属性の値が "black" の要素」  
を選択する CSSセレクタは `#clock [data-theme="black"]` のように書けます。  
これを利用して以下のように時計部分の color を特別に指定するとよいでしょう。  
（もし、background-color の指定もするならば、このプロパティが子孫に継承されない事も考慮する必要があります）

[code]

    /* 時計 */
    #clock [data-theme="black"] { color: black; }
    #clock [data-theme="blue"] { color: blue; }
    #clock [data-theme="silver"] { color: silver; }
    #clock [data-theme="white"]  { color: white; }
    
    [data-theme="black"]{ color: white; background-color: black; }
    [data-theme="blue"]{ color: white; background-color: blue; }
    [data-theme="silver"]{ color: black; background-color: silver; }
    [data-theme="white"]{ color: black; background-color: white; }
    
[/code]

もちろん、ボタンの方の color を指定してもいいですし、いろいろやり方はあると思います。


CC BY-SA 3.0
2015-10-16T16:44:17.400
17735
2015-10-16T16:44:17.400
3054
17733
answer