1

ラベルのフォントサイズと太さを変更したい。私はこれをStackOverflowで見つけました： StackOverflowの記事

しかし、それは質問に完全に答えていないようです、または私が得ていない何かがあります。

次のコードを検討してください。

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;
}

私の期待は、私のテキストが垂直方向の中央に配置され、緑色になることです。結果はまったく変わりません。好きなスタイルを設定でき、ラベルまたはHTMLラベルに変更はありません。それはすべて正常に見えます、私は何が間違っているのですか？

4

1 に答える 1

1

setStyleNameウィジェットの要素のclass属性（実際にはclassNameプロパティですが、これは同等です）を設定します。したがって、HTMLにlblATestLabel.setStyleName("gwt-Label.TestStyle")aを含めることと同じです。つまり、 （空白で区切られた）<div class="gwtLabel.TestStyle">の単一のクラスを持つ要素です。gwt-Label.TestStyleclass=""

一方、 CSSスタイルシートのセレクターは、とクラス.gwt-Label.TestStyleの両方を持つ任意の要素と一致します。これは、次のような要素になります（覚えておいてください：空白で区切られています）gwt-labelTestStyle<div class="gwt-Label TestStyle">class=""

したがって、必要なものに応じて、セレクターを修正するか（.gwt-Label\.TestStyle、すべてのブラウザーで機能しない場合があります）、クラスの名前を変更するgwt-Label-TestStyleか（eg）、既存の（ウィジェットの場合）クラスを追加します（）Labelgwt-LabellblATestLabel.addStyleName("TestStyle")

于 2013-01-30T14:59:11.067 に答える