Windows Phone 8 HTML5 应用和主题

Question

我正在开发一款WP8 HTML5游戏，并尝试响应用户选择的主题。我知道可以在CSS中使用Background标签。

body {
    font-size: 11pt;
    font-family: "Segoe WP";
    letter-spacing: 0.02em;
    background-color: Background;
    color: #FFFFFF;
    margin-
}

现在背景从黑色变为白色，但文本颜色没有改变，这显然是因为我将其设置为#FFFFFF。

我尝试在JavaScript中更改它，但奇怪的是当我尝试document.body.style.backgroundcolor时，它返回“”，甚至使用由HEX或RGB设置的变量也返回false。

有人有解决办法吗？

- Torvos

Answer 1

MainPage.xaml.cs

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    Browser.IsScriptEnabled = true;

    // Add your URL here
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));



    Browser.Navigated += (o, s) => {
        string theme = ((Visibility)Application.Current.Resources["PhoneLightThemeVisibility"] == Visibility.Visible) ?
            "light" : "dark";

        Browser.InvokeScript("eval", String.Format("document.body.className += ' {0}'", theme));
    };

}

phone.css

body {
    font-size: 11pt;
    font-family: "Segoe WP";
    letter-spacing: 0.02em;
    background-color: Background;
    margin-left: 24px;
}

.light {
    color: #000000;
}

.dark {
    color: #FFFFFF;
}

- Sergei Grebnov

Answer 2

document.body.style.backgroundcolor 拼写错误...

请尝试使用大写字母 C：document.body.style.backgroundColor

要更改正文的颜色，您可以使用 document.body.style.color

---

编辑：

顺便说一下，如果您要更改许多CSS属性，则应创建CSS类以更好地解决问题，方法如下：

body {
    /* default body css */
}

.myFirstColorSet {
    background-color: #FFF;
    color: #000;
    ...
}

.mySecondColorSet {
    background-color: #000;
    color: #FFF;
    ...
}

然后使用JavaScript，只需切换body类

document.body.className = "mySecondColorSet";

这里是与此示例相关的 JSFiddle：http://jsfiddle.net/promatik/K75TG/

- António Almeida

---

抱歉，拼写错误不是问题所在。如果我想让用户从应用内更改主题，创建类将非常有用，但我正在Windows Phone 8中构建此应用程序，其中主题由操作系统控制，并使用background-color: Background;和color: Highlight;选项传递给应用程序，但我正在寻找一些反转Background以在颜色标记中使用的东西。 - Torvos

Answer 3

虽然上述XAML有效，但这个简单的jQuery脚本也可以实现同样的效果

  <script>
    if ($("body").css("background-color") == 'rgb(0, 0, 0)'){
      $("body").css("color","rgb(255, 255, 255)");
    }
    else{
      $("body").css("color","rgb(0, 0, 0)");
    }
  </script>

- Torvos