連載
» 2009年11月13日 00時00分 公開

連載:jQuery逆引きリファレンス:第2回 属性&コンテンツ編 (16/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 要素の高さや幅を設定するには、height(val)、width(val)メソッドを利用します。引数valには数値、もしくは「em」や「%」などの単位付きの数値を指定できます(単なる数値の場合はピクセル値として認識します)。

 以下は、<div>要素で定義された領域をクリックすると、表示領域を250×300に拡大するサンプルです。

<style type="text/css">

.box {
  height : 100px;
  width : 250px;
  overflow : scroll;
  background-color: Yellow;
  border : solid 1px Red;
}

</style>

……中略……

<script type="text/javascript">

$(function() {
  $('div.box').click(function() {
    $(this).height(250).width(300);
  });
});
</script>

……中略……

<div class="box">
<h3>ASP.NET MVC 実践プログラミング</h3>
.NET Frameworkの新たなWebフレームワークASP.NET MVCがいよいよ登場です。
本書ではASP.NET MVCを初めて学ぶ人のために……

リスト043 <div>要素をクリックすると、領域を拡大(WidthHeightSet.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


黄色い部分をクリック

リスト043の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。