Windows Phone 8 HTML5应用程序和主题

Windows Phone 8 HTML5 App and Themes

本文关键字：应用程序 HTML5 Phone Windows      更新时间：2023-09-26

我正在开发一款WP8 HTML5游戏，并试图对用户选择的主题做出响应。

我知道我可以在CSS 中使用背景标签

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。

有人能解决这个问题吗？

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

电话.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;
}

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

尝试：document.body.style.backgroundColor
具有上限C。

要更改正文的颜色文本，可以使用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/

虽然上面的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>
相关文章：