bytefx:サイズを取得/変更する

 bytefxでオブジェクトのサイズを取得するにはbytefx.$sizeを使います。bytefx.$sizeの書式は以下のようになります。

bytefx.$size(対象オブジェクト)

 対象オブジェクトはdocument.getElementById()などで指定します。戻り値は配列になり最初の要素が横幅、次が縦幅になります。
オブジェクトのサイズを設定するにはbytefx.$size2を使います。bytefx.$size2の書式は以下のようになります。

bytefx.$size2(対象オブジェクト, 横幅, 縦幅)

 対象オブジェクトはdocument.getElementById()などで指定します。横幅/縦幅はピクセル値で指定します。
以下のサンプルでは赤いボックスのサイズを設定/取得することができます。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : サイズ取得/設定処理</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
function setSize()
{
var objW = document.getElementById("w").value;
var objH = document.getElementById("h").value;
bytefx.$size2(document.getElementById("box"), objW, objH);
}
function getSize()
{
var size = bytefx.$size(document.getElementById("box"));
alert(size[0]+", "+size[1]);
}
// --></script>
</head>
<body>
<h1>bytefx : サイズ取得/設定処理</h1>
<form>
<input type="text" value="150" id="w" size="5">
<input type="text" value="50" id="h" size="5">
<input type="button" value="サイズを設定" onClick="setSize()">
<input type="button" value="サイズを取得" onClick="getSize()">
</form>
<div id="box">ここのサイズが変更されます。</div>
</body>
</html>


[エフェクトの目次へ]
[「Ajaxを勉強しよう」の目次へ]

(2006.10.12)