在运行时更改GWT中CSS类的属性 [英] Change property of CSS class in GWT at runtime

问题描述

我熟悉将CSS类分配给GWT元素以控制其格式，但如果我要在其中一个CSS类中更改属性，该怎么办？

我有一个样式的数据列表。 CSS类用于指示各种数据类型（重要，常规，微不足道）。我希望允许用户隐藏小项。我想修改 span.trivial CSS类以设置 display：none

我知道我可以循环访问条目，查看条目是否 trivial 并添加 noShow 类（它本身有 display：none ） - 但是我正在做循环，我宁愿让浏览器做工作。 p>



这是否可以在GWT中进行？

Ian

解决方案

我假设我们有一个类似下面的结构

 < 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不必是hideTrivialdiv的直接子元素 - 如果您有更深的元素层次结构，那么就可以了。）

为了打开/关闭隐藏，你只需要从外部div添加/删除hideTrivial类。

没有GWT。）

I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?

I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none

I'm aware I could loop through the entries, see if an entry is trivial and add a noShow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.

Is this possible in GWT?

Ian

解决方案

I assume we have a structure similar to the following one

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

This is how I would solve the problem:

.hideTrivial span.trivial {
    display: none;
}

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

The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)

So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.

(This technique can be used with and without GWT.)

这篇关于在运行时更改GWT中CSS类的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！