JAvascript要素の寸法と位置を取得
3800 ワード
詳細
offsetの関連属性を学習する前に、offsetHeight/Width、offsetTop/offsetLeftなどが読み出し専用であり、画素値を数値的に返す(例えば、「12 px」ではなく12を返す)ことを明確に指摘しなければならない.
親の位置付け:CSS内のある要素domElement[position:relative/absolute]が相対的に位置する要素を指します.
1、offsetParent
offsetParentにとって最も重要なのはdomElementを知ることである.offsetParentはどの要素を指しますか.しかし、この点で異なるブラウザの間には微妙な違いがあります.
a、domElementはposition:relative/absolute属性を設定している:
domElement.offsetParentは、その要素の位置決め親要素を指します.
しかし、バグもあります.コードを見てください.
b、domElementはpositionを設定していません:relative/absolute、すなわちstatic:
この点はすべてのブラウザでほぼ同じで、domElementのoffsetParentはdomElementに最も近いposition:relative/absolute属性を持つ親要素を指します.存在しない場合は、要素を指します.ただし、domElementがそうである場合、offsetparentはcを指し、offsetParentの例:
offsetの関連属性を学習する前に、offsetHeight/Width、offsetTop/offsetLeftなどが読み出し専用であり、画素値を数値的に返す(例えば、「12 px」ではなく12を返す)ことを明確に指摘しなければならない.
親の位置付け:CSS内のある要素domElement[position:relative/absolute]が相対的に位置する要素を指します.
1、offsetParent
offsetParentにとって最も重要なのはdomElementを知ることである.offsetParentはどの要素を指しますか.しかし、この点で異なるブラウザの間には微妙な違いがあります.
a、domElementはposition:relative/absolute属性を設定している:
domElement.offsetParentは、その要素の位置決め親要素を指します.
しかし、バグもあります.コードを見てください.
-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
RainMan
#target{position:relative;}
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.documentElement); //IE
alert(target.offsetParent==document.body); //FF、 Safari
};
Target
rainman
b、domElementはpositionを設定していません:relative/absolute、すなわちstatic:
この点はすべてのブラウザでほぼ同じで、domElementのoffsetParentはdomElementに最も近いposition:relative/absolute属性を持つ親要素を指します.存在しない場合は、要素を指します.ただし、domElementがそうである場合、offsetparentはcを指し、offsetParentの例:
-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
RainMan
#outer{position:absolute;}
window.onload=function(){
vartarget=document.getElementById('target');
varouter=document.getElementById('outer');
alert(target.offsetParent==outer); //true
};
Target
rainman
-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
RainMan
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.body); //true
};
Target
rainman
、offsetLeft/Top offsetLeft:この要素の左borderの左端からその要素のoffsetParentの左borderの内縁までの水平距離を指す.offsetTop:エレメントの上borderの上縁からエレメントのoffsetParentの上borderの内縁までの垂直距離.コード:-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
RainMan
*{margin:0px;padding:0px;}
.test{
padding:5px;
margin:10px;
color:#fff;
border:7pxsolid#000;
background-color:#CC66FF;
}
#target{
position:absolute;
left:3px;
top:9px;
width:100px;
height:100px;
}
#outer{
position:relative;
width:300px;
height:300px;
}
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetLeft); //13=margin-10px+left-3px
};
Target
rainman