Question

我想更改标签中的字体大小和重量。我在Stack Overflow上找到了这个： StackOverflow article

然而，它似乎没有完全回答这个问题，或者有一些我没有得到的东西。

请考虑以下代码：

package com.mycompany.project.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Label;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class StyleTest implements EntryPoint
{
    private final Label lblATestLabel = new Label( "A Test Label" );

    public void onModuleLoad()
    {
        RootPanel rootPanel = RootPanel.get();
        lblATestLabel.setStyleName( "gwt-Label.TestStyle" );

        rootPanel.add( lblATestLabel, 204, 187 );
        lblATestLabel.setSize( "73px", "32px" );

        HTML hlabel = new HTML();
        hlabel.setStyleName("gwt-Label.TestStyle");
        hlabel.setHTML("Brown <span class=\"brown\">fox</span>");

        rootPanel.add(hlabel, 42, 36);
        hlabel.setSize("335px", "41px");
    }
}

这个样式位于StyleTest.css的底部：

.gwt-Label.TestStyle {
    color: Green;
    vertical-align: middle;
}

我的期望是我的文字将垂直居中并且是绿色的。结果完全没有变化。我可以设置我想要的任何样式，并且Label或HTML标签没有变化。这看起来很正常，我做错了什么？

Answer 1

setStyleName设置小部件元素的class属性（实际上是className属性，但这相当于）;因此lblATestLabel.setStyleName("gwt-Label.TestStyle")等同于在HTML中使用<div class="gwtLabel.TestStyle">，这是一个gwt-Label.TestStyle类的元素（class=""是以空格分隔的。）

另一方面，作为CSS样式表中的选择器的.gwt-Label.TestStyle将匹配gwt-label和TestStyle类的任何元素;这将是<div class="gwt-Label TestStyle">之类的元素（请记住：class=""是以空格分隔的）

因此，根据您的需要，修复您的选择器（.gwt-Label\.TestStyle，可能无法在所有浏览器中使用），重命名您的课程（例如gwt-Label-TestStyle）或添加现有的一个类（Label小部件）gwt-Label一个（lblATestLabel.addStyleName("TestStyle")）

为什么不设置标签的样式？

1 个答案: