Question

我很熟悉为GWT元素分配CSS类来控制它们的格式，但是如果我想在其中一个CSS类中更改属性呢？

我有一个样式的数据列表。 CSS类用于指示各种数据类型（重要的，常规的，平凡的）。我希望允许用户隐藏琐碎的条目。我想修改span.trivial CSS类来设置display:none

我知道我可以遍历这些条目，查看条目是trivial并添加noShow类（它本身有display:none） - 但我正在做循环，我宁愿让浏览器完成工作。

这在GWT中是否可行？

伊恩

Answer 1

我假设我们的结构类似于以下结构

<div>
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

这就是我解决问题的方法：

.hideTrivial span.trivial {
    display: none;
}

<div class="hideTrivial">
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

".hideTrivial span.trivial"选择器仅适用于“普通”跨度，如果它们出现在具有“hideTrivial”类的另一个元素中。（注意：span不必是“hideTrivial”div的 direct 子元素 - 如果你有更深层次的元素层次结构，那就没问题了。）

因此，要打开/关闭隐藏，只需在外部div中添加/删除“hideTrivial”类。

（这种技术可以在有和没有GWT的情况下使用。）

Answer 2

AFAIK，javascript无法更改CSS文件并重新应用。 GWT也是如此（因为它编译为JS）。因此，您无法更改CSS规则并让DOM中的所有元素都反映出更改。

但是，您可以获得DOM元素的样式并更改该样式。但这是针对特定元素的。在您的情况下，您仍然需要编写代码来遍历一组元素并进行更改。

我的建议是查看gwtQuery（一个端口，而不是jQuery的包装器到GWT）。它超级高效，超紧凑。这是一个单行做你需要的：

$("span.trivial").hide()

Answer 3

对于那些需要修改全局CSS属性值的人：您可以为此选择Style Injector。 http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html

在运行时更改GWT中CSS类的属性

3 个答案: