[英]Windows Phone 8 HTML5 App and Themes
I'm working on a WP8 HTML5 Game and was trying to be responsive to the theme the user selected. 我正在研究WP8 HTML5游戏,并试图响应用户选择的主题。
I know I can use the Background tag in the CSS 我知道我可以在CSS中使用Background标签
body {
font-size: 11pt;
font-family: "Segoe WP";
letter-spacing: 0.02em;
background-color: Background;
color: #FFFFFF;
margin-
}
So now the background changes from Black to White but not the text color, obviously due to my having it set to #FFFFFF 所以现在背景从黑色变为白色而不是文本颜色,显然是由于我将其设置为#FFFFFF
I tried to change it in the javascript but oddly enough when I try document.body.style.backgroundcolor it returns “” and even using a variable set by HEX or RGB returns false. 我尝试在javascript中更改它,但奇怪的是,当我尝试document.body.style.backgroundcolor它返回“”,甚至使用由HEX或RGB设置的变量返回false。
Anyone have a solution to this? 有人有解决方案吗?
MainPage.xaml.cs 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 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;
}
document.body.style.backgroundcolor
is misspelled ... document.body.style.backgroundcolor
拼写错误...
Try: document.body.style.backgroundColor
尝试:
document.body.style.backgroundColor
With Uppercased C
. 使用Uppercased
C
To change te color text of the body you can use document.body.style.color
要更改正文的te颜色文本,可以使用
document.body.style.color
EDIT: 编辑:
By the way, probably there is a better way to solve your problem, if you are going to change a lot of css properties, you should create css classes, like this: 顺便说一下,可能有更好的方法来解决你的问题,如果要改变很多css属性,你应该创建css类,如下所示:
body {
/* default body css */
}
.myFirstColorSet {
background-color: #FFF;
color: #000;
...
}
.mySecondColorSet {
background-color: #000;
color: #FFF;
...
}
And then with javascript, just switch the body class 然后使用javascript,只需切换正文类
document.body.className = "mySecondColorSet";
Here is the fiddle with this example: http://jsfiddle.net/promatik/K75TG/ 这是这个例子的小提琴: http : //jsfiddle.net/promatik/K75TG/
While the above XAML works so does this simply jQuery script 虽然上面的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.