ホーム >>> HTML整理ノート

width 幅　／ height 高さ.

HTML要素の高さ／幅を設定。子タグに継承しない。

Sample

この＜ｐ＞タグには、幅３００ｐｘ、高さ５０ｐｘを設定しています。

一番外側の<DIV style="width:400px;height:100px">
二番目の<DIV style="width:60%;height:80%">
三番目の<DIV style="width:80%;height:80%">

(画像（width="103" height="116")をスタイルシートで＜style="width:250px;height:80px＞に変形。画像の属性よりスタイルシートのほうが優先される）

●Script プロパティ･･･＜width／height＞
　　　　　　　　　　踊る水平線

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var tp = 100;   //水平線のtop位置
var lef = 200;  //水平線のleft位置
var hei = 10;           //水平線のheight値
var wid = 200;          //水平線のwidth値
var n = 5;              //水平線のheight値の増減分
var m = 5;              //水平線のwidth値の増減分
function HrA(){
        tp -= n;
        sp.style.top = tp;
        hei = hei + 2 * n;
        sp.style.height = hei;
        if(tp<=50||tp>=100){n = -n;}    //増減値の符号を反転する
        timerA = setTimeout("HrA()",150);
        if(tp==100){
                clearTimeout(timerA);
　　　　　　　　HrB();
        }
}
function HrB(){
        lef -= m;
        sp.style.left = lef;
        wid = wid + 2 * m;
        sp.style.width = wid;
        if(lef<=150||lef>=200){m = -m;} //増減値の符号を反転する
        timerB = setTimeout("HrB()",150);
        if(lef==200){
                clearTimeout(timerB);
                HrA();
        }
}
//--></script>
</head>

<body onload="HrA();">
<p  style="width:300px;height:50px;border:1px solid navy">
　　　　この＜ｐ＞タグには、幅３００ｐｘ、高さ５０ｐｘを設定しています。</p> 
<div style="width:400px;height:100px;border:1px solid red">
　　一番外側の&lt;DIV style=&quot;width:400px;height:100px&quot;&gt;
　　<div style="width:60%;height:80%;border:1px solid navy">
　　　　　二番目の&lt;DIV style=&quot;width:60%;height:80%&quot;&gt;
　　　　　<div style="width:80%;height:80%;border:1px solid red">
　　　　　　　三番目の&lt;DIV style=&quot;width:80%;height:80%&quot;&gt;
　　　　　</div>
　　</div>
</div>
<hr style="width:400px;height:3mm;color:green">
<img src="../../images/cut/umeuguisu.gif" width="103" height="116" border="0"
　　　　　　 style="width:250px;height:80px">

<div style="height:140px">　踊る水平線
　　<hr id="sp" style="width:200px;color:#9999cc">
</div>