ドキュメントと要素の幾何学図形
基礎知識は、スクロールバーの位置を取得し、window.pageXOffset/documentElement.scrollLeft/body.scrollletop; ウィンドウサイズを取得し、window.inner Width Height/document.client Width𞓜client Height/body.client Width Height 要素のサイズを取得するget BoundingCientRect(left,top,right,bottom,width height) 文書位置=ウィンドウサイズ+スクロールバー位置 offset Width:content+padding+border clientWidth:content+padding scrollWidth:content＋padding＋オーバーフローの内容 offset Top:ドキュメント座標、または親要素に対する座標(positionを持つ) clientTop:border外縁とpadding外側の距離は、通常はborder Topの幅であり、一般には を使用しない. scrollTop:scrollBarの位置 offset Part:offset Topに対する親要素であり、nullであれば文書 を表している.
paddingを例に挙げて、1つの要素のpaddingサイズを獲得するには、以下のいくつかのステップを経なければならない.は、get ComputatidStyleまたはcurrentStyleによって要素の計算スタイル を得る.は、IEブラウザに対して、スタイル単位は、2 emなどの相対的な単位であり、px単位に変換する必要があり、基本的な方法は、element.style.left=2 emを設定することである.その後、element.style.pixelLeftを通じて決定値を獲得します.(もちろん、実施の過程でstyleの値を回復する必要があります.詳細はdojo-style.jsのtoPixel方法 を参照してください.は、対応する値、paddingLeft、paddingRightなどを取得する(詳細はdom-geometry.js にある.
function getScrollOffsets(w){
var w = w || window;
if(w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset};
var d = w.document;
if(document.compatMode == "CSS1Compat"){
return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};
}
return {x: d.body.scrollLeft, y: d.body.scrollTop};
}
function getViewportSize(w){
var w = w || window;
if(w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight};
var d = w.document;
if(document.compatMode == "CSS1Compat"){
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
}
return {w: d.body.clientWidth, h: d.body.clientHeight};
}
function size(e){
var box = e.getBoundingClientRect();
return {w: box.width || box.right - box.left, h: box.height || box.bottom - box.top};
}
function getElementPos(elt){ // == getBoundingClientRect();
var x = 0, y = 0;
for(var e = elt; e != null; e = e.offsetParent){
x += e.offsetLeft;
y += e.offsetTop;
}
for(var e = elt.parentNode; e != null && e.nodeType == 1; e = e.parentNode){
x -= e.scrollLeft;
y -= e.scrollTop;
}
}
paddingを例に挙げて、1つの要素のpaddingサイズを獲得するには、以下のいくつかのステップを経なければならない.
geom.getBorderExtents = function getBorderExtents(/*DomNode*/ node, /*Object*/ computedStyle){
node = dom.byId(node);
var px = style.toPixelValue, s = computedStyle || style.getComputedStyle(node),
l = s.borderLeftStyle != none ? px(node, s.borderLeftWidth) : 0,// border ， solid, dotted。 IE ，currentStyle 1px #f00;
t = s.borderTopStyle != none ? px(node, s.borderTopWidth) : 0,
r = s.borderRightStyle != none ? px(node, s.borderRightWidth) : 0,
b = s.borderBottomStyle != none ? px(node, s.borderBottomWidth) : 0;
return {l: l, t: t, r: r, b: b, w: l + r, h: t + b};
};