动态变化的主题

问题描述

我使用jQuery Mobile和PhoneGap制作了一个应用程序。我想动态地改变主题，所以我做了这样的事情：

I am making an app with jQuery Mobile and PhoneGap. I want to dynamically chnge themes so I made somethinglike this:

function theme()
{
    Array.prototype.forEach.call(document.getElementsByTagName("*"), function (el) {
    el.setAttribute("data-theme", "e");
});
}

问题是主题只有在鼠标滚动到元素后才会改变，例如点按事件。

The problem is that themes change only after scrolling mouse on elements or for example on "tap" event.

如何解决它，而无需重新加载页面？

How to fix it without reloading page? I want to set a theme and have it on all my sites, when they start.

推荐答案

你不能以这种方式你试图。当jQuery mobile在显示页面之前查看 data-theme 属性时，它会为您创建它的魔法。也就是说，它根据选择的主题更改应用的CSS规则。所以，如果你不想重新加载页面，你必须改变CSS规则，而不是 data-theme 属性。像这样：

You can't in the way you're trying. When jQuery mobile looks at the data-theme attribute before the page is shown, it does its magic for you. That is, it changes the applied CSS rules based on the choosen theme. So, if you want to not reload the page, you have to change the css rules and not the data-theme attribute. Something like this:

$('#button1').css(....);

这篇关于动态变化的主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！