Windows 8 如何更改WinJS.UI.ToggleSwitch的文本颜色_Windows 8_Windows Runtime_Winjs_Toggleswitch

Windows 8 如何更改WinJS.UI.ToggleSwitch的文本颜色

windows-8 windows-runtime

Windows 8 如何更改WinJS.UI.ToggleSwitch的文本颜色,windows-8,windows-runtime,winjs,toggleswitch,Windows 8,Windows Runtime,Winjs,Toggleswitch,我正在使用设置窗格中的切换开关。问题是，标题中的文字和labelOff、labelOn不可见。我不确定如何从WinJS.UI.ToggleSwitch更改前面的颜色或样式，以便开始显示此文本。任何例子都将不胜感激。这是我的html <!DOCTYPE html> <html> <head> <title></title> </head> <body> &l

我正在使用设置窗格中的切换开关。问题是，标题中的文字和labelOff、labelOn不可见。我不确定如何从WinJS.UI.ToggleSwitch更改前面的颜色或样式，以便开始显示此文本。任何例子都将不胜感激。这是我的html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="mypage fragment"
            id="mysettings" 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{width:'narrow'}">
            <div class="win-header">       
                    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
                    </button>
                <div class="win-label">My Settings</div>
            </div>
            <div class="mytoggle"  data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title:'Test', labelOff: 'Close', labelOn:'Open', checked: true}"></div>
        </div>  
    </body>
</html>


我的设置

下面是我的css

.fragment.mypage.mytoggle.win title.win labelOff{ 颜色：绿色；}

您可以参考css样式类以了解更多信息

default.js：

app.onsettings = function onsettings(e)
{
    e.detail.applicationcommands = {
        about: { title: 'About', href: '/pages/settings/about.html' },
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
}

/页面/about/about.css：

.myflyout .win-content .mytoggle .win-title
{
    color: blue;
}

/页面/about/about.html页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/pages/settings/about.css" rel="stylesheet" />
</head>
<body>
    <!-- BEGINSETTINGFLYOUT -->
    <div class="myflyout" data-win-control="WinJS.UI.SettingsFlyout" 
       data-win-options="{settingsCommandId:'about'}">
        <div class="win-ui-light win-header" >
           <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" 
            class="win-backbutton"></button>
           <div class="win-label">About</div>
           <img src="/images/smalllogo.png" style="position: absolute; right: 20px;"/>
        </div>                
        <div class="win-content">
            <div class="mytoggle" data-win-control="WinJS.UI.ToggleSwitch" 
               data-win-options="{title: 'example of toggle'}" >
            </div>
        </div>
    </div>
    <!-- ENDSETTINGSFLYOUT -->
</body>
</html>


关于

截至2016年，我未能使用“.win title”完成此操作。改为使用“.win-toggleswitch header”。

感谢您的回复。我已经用我正在使用的代码更新了我的问题，包括你的建议，但我仍然没有看到任何带有切换开关的文本。你知道我做错了什么吗？试试看。它还具有切换开关控制。更新答案。我可以看到这个代码的蓝色切换开关标题。谢谢Sushil。我发现这是在我的代码中引起的问题。当我在两个div中完成这项工作时，正如您在代码中所做的那样，一切都正常。我不知道为什么它不能在一个分区内工作。不过再次感谢您的帮助。