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。

有人有解决方案吗？

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;
}

Answer 2

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

尝试： document.body.style.backgroundColor
使用Uppercased C

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

---

编辑：

顺便说一下，可能有更好的方法来解决你的问题，如果要改变很多css属性，你应该创建css类，如下所示：

body {
    /* default body css */
}

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

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

然后使用javascript，只需切换正文类

document.body.className = "mySecondColorSet";

这是这个例子的小提琴： http ： //jsfiddle.net/promatik/K75TG/

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>