GWT-更改CSS悬停属性_Css_Gwt_Dynamic_Themes

GWT-更改CSS悬停属性

css gwt dynamic

GWT-更改CSS悬停属性,css,gwt,dynamic,themes,Css,Gwt,Dynamic,Themes,我是GWT的新用户，我正在寻找一些关于“主题管理”的建议我必须做一个网站，可以处理主题的变化。我的意思是，用户可以通过填写表单来创建自己的主题，然后网站将自动动态地更改其颜色以显示新主题我想对所有静态属性使用CSS表，并使用一些GWT行（例如label.getElement.getStyle.setColor（…）来更改颜色。但我有很多“悬停”属性，我认为创建许多MouseOverHandler不是一个好主意有没有一种方法可以动态编辑CSS工作表，或者有一个魔术可以做到这一点谢谢。在不重

我是GWT的新用户，我正在寻找一些关于“主题管理”的建议

我必须做一个网站，可以处理主题的变化。我的意思是，用户可以通过填写表单来创建自己的主题，然后网站将自动动态地更改其颜色以显示新主题

我想对所有静态属性使用CSS表，并使用一些GWT行（例如label.getElement.getStyle.setColor（…）来更改颜色。但我有很多“悬停”属性，我认为创建许多MouseOverHandler不是一个好主意

有没有一种方法可以动态编辑CSS工作表，或者有一个魔术可以做到这一点

谢谢。

在不重新加载整个应用程序的情况下更改主题的最简单方法是将主题类分配给

body

元素

您可能希望在应用程序中的每个CSS类前面加上特定的主题，例如：

.theme1 .myClass {
  color: red;
}

.theme2 .myClass {
  color: blue;
}

然后将特定主题应用于

body

元素：

<body class="theme1">

这样，具有class

myClass

的每个元素的颜色都将从红色更改为蓝色。

您不能动态编辑CSS文件，但可以将CSS样式作为新的CSS文件或直接插入到文档中

例如，您可以在“main.CSS”文件中定义所有关键的CSS规则，并使用

样式

标记将用户定义的规则直接添加到宿主HTML页面。

您有很多选择-最直接的方法（对我来说）是利用GWT引入的现有CSS类。如果您查看GWT提供的任何小部件的javadocs，您会注意到

CSS样式规则

部分。例如：

这意味着您添加到页面的每个

按钮

都应用了

.gwt按钮

样式。如果使用覆盖此样式的规则插入CSS样式表：

.gwtButton {
    background: red;
}

你所有的按钮都会变成红色。您可以使用注入样式表。动态创建样式表的内容取决于您——但它只是文本，应该不难（但确保生成的CSS规则有效！）

要开始，请尝试将此代码连接到某个按钮，并查看单击它是否会触发更改红色页面上的所有

按钮
StyleInjector.inject(".gwt-Button { background: red; }");

如果您有需要以不同方式设置样式的自定义小部件，只需向它们添加一个单独的类（.customwidgetWhatch
，如按钮
具有.gwt按钮
，等等），您将在自定义样式表中包含该类
确保您了解CSS是如何工作的，以及它能为您做些什么。例如，如果希望每个按钮的样式相同，则不必单独更改每个按钮的样式，只需使用：
button {
    background: green;
}

所有的
都将变为绿色。谢谢你的回答。我考虑过了，但我不知道会有什么不同的颜色。用户将输入例如“按钮颜色”：“#000000”，然后我将必须为每个按钮着色…感谢您的回答：）我不确定您的意思。。。如何将规则添加到HTML主机页中？正如Igor所建议的，使用StyleInjector可能是最好的选择。谢谢！那正是我要找的！
StyleInjector.inject(".gwt-Button { background: red; }");

button {
    background: green;
}