GWT在运行时注入CSS

时间:2012-02-05 07:03:30

标签: css gwt code-injection

我在我的项目中使用gwt 2.3.0。 我需要改变我的CSS来源:

<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">

在运行时(我想决定在onModuleLoad方法上使用哪个文件)。 这样做最好的是什么?

3 个答案:

答案 0 :(得分:11)

要注入CSS文件,您需要以与ScriptInjector类似的方式继续javascript文件:

/** Load CSS file from url */
public static void loadCss(String url){
    LinkElement link = Document.get().createLinkElement();
    link.setRel("stylesheet");
    link.setHref(url);
    nativeAttachToHead(link);
}

/**
 * Attach element to head
 */
protected static native void nativeAttachToHead(JavaScriptObject scriptElement) /*-{
    $doc.getElementsByTagName("head")[0].appendChild(scriptElement);
}-*/;

<强> @jusio:

StyleInjector.inject(...)仅适用于CSS内容:

StyleInjector.inject(".myClass{color:red;}");

答案 1 :(得分:1)

在GWT 2.8.2或J2CL上使用Elemental 2:

 public static void loadCss(String url){
        HTMLDocument document = DomGlobal.document;

        Element link = document.createElement("link");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        link.setAttribute("href", url);

        document.getElementsByTagName("head").getAt(0).appendChild(link);
    }

答案 2 :(得分:0)

使用此JSNI方法并通过根据您的要求将url(您的css的路径)作为参数调用GWT的onModuleLoad()来调用此方法形式。

public static native void loadCss(String url)/*-{
    var fileref=document.createElement("link");
    fileref.setAttribute("rel","stylesheet");
    fileref.setAttribute("type","text/css");
    fileref.setAttribute("href",url);
    $doc.getElementsByTagName("head")[0].appendChild(fileref);
}-*/;