« ローカルディスクへのデータ保存 | トップページ | ドラッグ&ドロップ »

2007年3月28日 (水)

スタイル

スタイル情報の取得および設定をするときは、dojo.html.layoutをrequireする。

dojo.require("dojo.html.layout");

サイズ

HTML要素のオブジェクトまたはHTML要素のIDを文字列と指定して、 以下の3つのサイズを得ることができる。 dojoのwidgetオブジェクトを渡しても結果はNaNが返る。

     
  • content: コンテンツ自身のサイズ
    • dojo.html.getContentWidth(obj)/ dojo.html.getContentHeight(obj)
  • inner: content + padding + borderのサイズ
    • dojo.html.getOuterWidth(obj) / dojo.html.getOuterHeight(obj)
  • outer: content + padding + border + marginのサイズ
    • dojo.html.getInnerWidth(obj) / dojo.html.getInnerHeight(obj)

以下のように幅と高さを持つオブジェクト一緒に返すこともできる。

var c= dojo.html.getMarginBox(obj)/getBorderBox(obj)/getContentBox(obj);
c.width;
c.height;

サイズを取得するだけでなく、サイズを設定することもできる。

dojo.html.setMarginBox(obj, { width: 110, height: 60 });

位置情報

dojo.html.getAbsolutePosition(obj, boolean)により、指定したHTML要素の絶対位置を得られる。2つ目の引数では、trueを指定するとbody要素内における絶対位置を返す。falseを指定するとウィンドウ枠内の表示位置における絶対位置を返す。

trueのときは、body要素内の絶対位置であるため、ウィンドウのスクロールバーの位置に関係なく同じ値となる。falseのときは、ウィンドウのスクロールバーの位置によって、表示されるHTML要素の位置が変わる。

var pns = dojo.html.getAbsolutePosition(obj, false);
var pws = dojo.html.getAbsolutePosition(obj, true);
pns.x; // X座標
pns.y; // Y座標

dojo.html.getScrollLeft()/Top()により、ウィンドウのスクロールバーのスクロール位置を返す。 dojo.html.getScroll()を使ったときは、

var scroll = dojo.html.getScroll();
scroll.left;
scroll.top;

表示のON/OFF

指定したHTML要素の表示をON/OFFと切り替える。setShowing/show/hide/setDisplayを用いたときは、CSSのdisplayプロパティでnoneを指定するかしないかを切り替える。setVisibilityを用いたときは、CSSのvisibilityプロパティをvisible/hiddenに切り替える。

displayプロパティでnoneを指定すると、HTML要素自体がなくなる。一方、visibilityをvisible/hiddenに切り替えたときは、表示しないだけで、指定したHTML要素はなくならない。そのため、visibilityを切り替えてもページ全体のレイアウトは変わらない。

表示をONにする。

dojo.html.setShowing(obj, true);
dojo.html.show(obj);
dojo.html.setDisplay(obj, true);
dojo.html.setVisibility(obj, true);
dojo.html.setVisibility(obj, '');

表示をOFF/非表示にする。

dojo.html.setShowing(obj, false);
dojo.html.hide(obj);
dojo.html.setDisplay(obj, false);
dojo.html.setVisibility(obj, false);
dojo.html.setVisibility(obj, 'hidden');

表示されているかどうかをチェックする。isShowingとisDisplayedのときは、displayプロパティがnoneかどかをチェックする。ただし、visibility: visibleのときは、display:visibleでもtrueとなる。isVisibleは、visibilityがvisibleかhiddenかをチェックする。このときは、display:noneでもvisibility: visibleのときはtrueになる

dojo.html.isShowing(obj); 
dojo.html.isDisplayed(obj);
dojo.html.isVisible(obj);

以下のtoggleXXXでは、表示されているときは非表示、表示されていないときは表示に切り替える。

dojo.html.toggleShowing(obj);
dojo.html.toggleDisplay(obj);
dojo.html.toggleVisibility(obj);

CSSの追加

insertCssTextを用いてCSSを追加できる。
dojo.html.insertCssText("table{ background-color: red;}");
insertCssFileを使うことで、リンクするCSSファイルを追加することもできる。
dojo.html.insertCssFile("./css/test.css");

« ローカルディスクへのデータ保存 | トップページ | ドラッグ&ドロップ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/5890312

この記事へのトラックバック一覧です: スタイル:

« ローカルディスクへのデータ保存 | トップページ | ドラッグ&ドロップ »