Question

关于这一点，SO的解决方案很少，但与我的情况无关。

我的war文件夹中有一个单独的css文件。

我的war文件夹中的w3-theme-blue.css

我的war文件夹中的w3-theme-red.css。

现在，如果我想加载蓝色主题，我会在我的project.html文件中写这个

      <link rel="stylesheet" href="/w3-theme-blue.css">

如果我想加载红色主题，我会在我的project.html文件中写这个

       <link rel="stylesheet" href="/w3-theme-red.css">

现在我想要实现的是在运行时从蓝色变为红色，反之亦然。

我在javascript中检查过这个

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

将此与jsni一起使用，但没有运气

然后我尝试在GWT中实现相同的代码，就像这样

     Element s = DOM.createElement("link");
    s.setAttribute("type", "text/css");
    s.setAttribute("href", "w3-theme-red.css");
    DOM.getElementById("body").appendChild(s);

但是，仍然没有运气......

请指导..

感谢

Answer 1

如果您想动态加载样式表，请使用JSNI

private native void loadCSS (String cssHref) /*-{
  $doc.write('<link rel="stylesheet" type="text/css" href="' +
cssHref + '">');
}-*/

Answer 2

使用StyleInjector：

// safe your StyleElement that is returned with injectStyleSheet()
// so you can override it later with a new style
public static StyleElement content;

[...]  

CssResource style =  GWT.create(CssBundle.class);
content = StyleInjector.injectStylesheet(style.css1().getText());

要用另一种方式替换你的风格，你可以这样做：

  // overrides the content, that you defined before with your second theme
  StyleInjector.setContents(content, style.css2().getText());

  // setContents docu says that it might not work as expected in IE...
  // maybe you have to use inject() then and delete the old style,
  // otherwise you are adding more and more styles after each theme change  

  // StyleInjector.inject(style.css2().getText());

我希望这能让你前进......

如何在运行时更改GWT中的CSS主题？

2 个答案: