css - GWT - 更改 CSS 悬停属性

Question

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

我必须制作一个可以处理主题更改的网站。我的意思是，用户可以通过填写表格来制作自己的主题，然后网站会自动动态地更改其颜色以显示新主题。

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

是否有动态编辑 CSS 表的方法或魔术？

谢谢。

Answer 1

您有很多选择 - 最直接的(对我而言)是利用 GWT 引入的现有 CSS 类。如果您查看 GWT 提供的任何小部件的 javadoc，您会注意到 CSS Style Rules部分。例如， Button :

.gwt-Button  
    the outer element

这意味着每个 Button你添加到页面有一个.gwt-Button应用于它的样式。如果您使用覆盖此样式的规则注入(inject) CSS 样式表:

.gwtButton {
    background: red;
}

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

为了让您开始，尝试将此代码连接到某个按钮并查看单击它是否会触发更改所有 Buttons在页面上红色:

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

如果您有想要不同样式的自定义小部件，只需向它们添加一个单独的类( .customWidgetWhatever ，例如 Button 有 .gwt-Button 等)，您将包含在您的自定义样式表中。

确保您了解 CSS 的工作原理以及它可以为您做什么。例如，如果你想为每个按钮设置相同的样式，则不必单独更改每个按钮的样式，只需使用:

button {
    background: green;
}

所有<button> s 会变成绿色。