JAvascript取得要素のサイズと位置1:offsetTop/Left、offsetWidth/Height、offsetParent
6680 ワード
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の例について:
2、offsetLeft/Top
offsetLeft:要素の左borderの左エッジから要素のoffsetParentの左borderの内側エッジまでの水平距離.
offsetTop:エレメントの上borderの上縁からエレメントのoffsetParentの上borderの内縁までの垂直距離.
コード:
3、offsetWidth/offsetHeight
要素がページに占める幅と高さの合計を示します.注意:要素の枠線とスクロールバーを計算します.
4、関連応用
a、要素の実際の幅と高さ、例えば、適応高さの段落は、要素CSSが積層された最終高さ【下のコードを参照】を得ることができることが多いが、この方法はIEでautoを返す場合があるので、要素のoffsetWidth/offsetHeightを使用するのが理想的な方法である.
要素の位置を取得する移植可能な方法:ウィンドウ内の位置
転載先:http://tech.ddvip.com/web/javascript/index.html
親の位置付け:CSS内のある要素domElement[position:relative/absolute]が相対的に位置する要素を指します.
1、offsetParent
offsetParentにとって最も重要なのはdomElementを知ることである.offsetParentはどの要素を指しますか.しかし、この点で異なるブラウザの間には微妙な違いがあります.
a、domElementはposition:relative/absolute属性を設定している:
domElement.offsetParentは、その要素の位置決め親要素を指します.
しかし、バグもあります.コードを見てください.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
#target{position:relative;}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.documentElement); //IE <html>
alert(target.offsetParent==document.body); //FF、Safari <body>
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
b、domElementはpositionを設定していません:relative/absolute、すなわちstatic:
この点はすべてのブラウザでほぼ同じで、domElementのoffsetParentはdomElementに最も近いposition:relative/absolute属性を持つ親要素を指します.存在しない場合は、要素を指します.ただし、domElementがの場合offsetparentはを指す例外もあります.
c、offsetParentの例について:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
#outer{position:absolute;}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
varouter=document.getElementById('outer');
alert(target.offsetParent==outer); //true
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetParent==document.body); //true
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
2、offsetLeft/Top
offsetLeft:要素の左borderの左エッジから要素のoffsetParentの左borderの内側エッジまでの水平距離.
offsetTop:エレメントの上borderの上縁からエレメントのoffsetParentの上borderの内縁までの垂直距離.
コード:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
*{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;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
vartarget=document.getElementById('target');
alert(target.offsetLeft); //13=margin-10px+left-3px
};
</script>
</head>
<body>
<divid="outer"class="test">
<divid="inner">
<divid="target"class="test">Target<br/>rainman</div>
</div>
</div>
</body>
</html>
3、offsetWidth/offsetHeight
要素がページに占める幅と高さの合計を示します.注意:要素の枠線とスクロールバーを計算します.
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;
4、関連応用
a、要素の実際の幅と高さ、例えば、適応高さの段落は、要素CSSが積層された最終高さ【下のコードを参照】を得ることができることが多いが、この方法はIEでautoを返す場合があるので、要素のoffsetWidth/offsetHeightを使用するのが理想的な方法である.
function getStyle(elem,type){
var typeface='';
if(elem.currentStyle)
typeface=elem.currentStyle[type];
elseif(window.getComputedStyle)
typeface=window.getComputedStyle(elem,null)[type];
returntypeface;
}
要素の位置を取得する移植可能な方法:ウィンドウ内の位置
function getX(elem){
var x=0;
while(elem){
x=x+elem.offsetLeft;
elem=elem.offsetParent;
}
return x;
}
function getY(elem){
var y=0;
while(elem){
y=y+elem.offsetTop;
elem=elem.offsetParent;
}
return y;
}
転載先:http://tech.ddvip.com/web/javascript/index.html