GWT 在运行时注入 CSS答案

【问题标题】：GWT inject CSS on runtimeGWT 在运行时注入 CSS
【发布时间】：2012-02-27 04:28:23
【问题描述】：

我在我的项目中使用 gwt 2.3.0。我需要更改我的 CSS 源代码：

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

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

【问题讨论】：

标签： css gwt code-injection

【解决方案1】：

要注入 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;}");

【讨论】：

看起来我在这个问题上失败了两次（第一次提供了错误的解决方案，第二次 - 忘记修复它）。感谢您发布正确的解决方案。

【解决方案2】：

使用此 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);
}-*/;

【讨论】：

【解决方案3】：

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

【讨论】：