テキストをスタイリングせずにDojoボタンのサイズを変更するにはどうすればよいですか？

Question

私はDojoとCSSの初心者ですので、ここではっきりと分かりません。

プログラムで作成された複数のDijitボタンがあるページがあります。そのうちの1つを大きくしてテキストだけを残し、テキストとボタンの端の間隔を広げたいと思います。 .dijiButtonNodeのCSSを変更する必要はありません。他のDijitボタンが変更されるべきでないページがあるからです。

Iウィジェット宣言にこれを追加しようとした：

style: { padding: "1em" } 

これ：

class: "PaddedButton" 

.PaddedButton 
{ 
    padding: 1em; 
} 

しかしネストとしてのDijitボタンがレンダリングされているので、それが代わりにボタンの周りの領域を埋め及びます。

Answer 1

CSSで作業する最善の方法は、FirebugやChromeデベロッパーツールのようなブラウザデバッグツール（既に使用しているはずのもの）を使用することです。要素のDOMノードはinspect_elementを使って簡単に見つけられます。そして、あなたが望むことができるまでCSSスタイルを直接編集します。アクティブなCSSルールと、無視されたり上書きされているルールを確認することもできます。

私はここで働く例が出ている： http://jsfiddle.net/missingno/FrYdx/2/

重要な部分は、以下のCSSセレクタです：

.paddedButton.dijitButton .dijitButtonNode { 
    padding: 1em; 
} 

これは、あるノードから下降クラスdijitButtonNodeで任意のノードを選択し、 paddedButtonクラスとdijitButtonクラスの両方.paddedButton .dijitButtonNodeを実行することはできませんでした。なぜなら、ルールはより特定のセレクタによってカスケード接続されるからです。