快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

亿博体育靠谱吗_酒文化网进入



原先嘛,既然器械是IE发现的,应该统统都以IE为标准才是,不明白非得让w3c那帮官僚认可才行。后知后觉的w3c独一做的好事是第一次浏览器大年夜战后,让天下决裂成两大年夜阵营进行冷战。那个光阴,苹果被微软打得快破产,为了避免垄断嫌疑,微软资助了苹果,此中一个前提是让Mac也用上IE,不过像 safari,opera等小众浏览器,早在第一次浏览器大年夜战中,就实现了许多网景与IE的措施。剩下的便是火狐,曩昔是没有什么人答理w3c这个傻冒的,也就火狐出生后开始大年夜量实现(也可能在阴郁拟订)许多w3c草案的措施。当然不能说w3c整个都不好,如xpath,xquery等器械,照样很有用,当然也很小众。IE纵然没有它们还能活得很好。此后,IE还有一系列与结构有关的措施,如offset家族,scroll家族,client家族与 getClientRects() 、getBoundingClientRect()。这些措施异常有用,乃至于火狐这样执拗的浏览器着末照样实现了它们。分外是 getBoundingClientRect措施,有了它可以速率取得元素节点的坐标与尺寸。着末w3c终于坐不住了,把它们与一些处置惩罚样式的措施统一路来,称之为CSSOM(Cascading Style Sheets Object Model,层叠样式表工具模型)。

按草案的提交顺序,分为两部分。第一部分,处置惩罚样式表的措施与属性。这方面w3c做得异常掉败了,在IE下似乎就只有document.styleSheets用得了,不过这措施极可能原先便是IE的。据说IE9整个支持,不过亿博体育靠谱吗xp不支持IE9也是枉费的!第二部分,处置惩罚结构的措施与属性。基础上是IE发现的器械,当然还有一些火狐的器械。现在重点看一下第二部分的内容:

首先是一个叫AbstractView的接口,是所有视图的根基。在FF中我们真的能找到这器械。

alert(window.AbstractView); //[object Abstract亿博体育靠谱吗View]

然后是Media接口, 我找不到它存在的证实。

再然后是ScreenView接口, 它在FF等标准浏览器叫做document.defaultView。不过实际上它被绑定了比w3c草案更多的属性:

var aa = document.getElementById("aa");

var s = ""

for(var name in document.defaultView)

if(! /firebug/i.test(name))

s += name+" : "+document.defaultView[name]+"

"

aa.innerHTML = s;

请在标准浏览器下运行:

运行代码

alert(window.innerWidth)

alert(window.innerHeight)

alert(window.outerWidth)

alert(window.outerHeight)

alert(window.pageXOffset)

alert(window.pageYOffset)

alert(window.screenX)

alert(window.screenY)

alert(window.scroll)

alert(window.scrollTo)

alert(window.scrollBy)

Screen接口,用于供给与用户显示器相关的信息:

alert(screen.availWidth)

alert(screen.availHeight)

alert(screen.width)

alert(screen.height)

alert(screen.colorDepth)

alert(screen.pixelDepth)

剩下的就不细节了,基础上是IE那一套器械还有对鼠标事故工具的属性进行标准化。它供给了许多谋略基准来谋略offsetLeft等的值。现在重点看看offsetParent。记得John Resig在《Pro.JavaScript.Techniques》这本严重短缺检测的书中供给了两个谋略元素坐标值的函数来为害人世:

//page 144

// Find the X (Horizontal, Left) position of an element

function pageX(elem) {

// See if we're at the root element, or not

return elem.offsetParent ?

// If we can still亿博体育靠谱吗 go up, add the current offset and recurse upwards

elem.offsetLeft + pageX( elem.offsetParent ) :

// Otherwise, just get the current offset

elem.offsetLeft;

}

// Find the Y (Vertical, Top) position of an element

function pageY(elem) {

// See if we're at the root element, or not

return elem.offsetParent ?

// If we can still go up, add the current offset and recurse upw

elem.offsetTop + pageY( elem.offsetParent ) :

// Otherwise, just get the current offset

elem.offsetTop;

}

或是整合成如下类似版本:

var getOffseft = function( el ) {

var x = 0;

var y = 0;

do {

x += el.offsetLeft;

y += el.offsetTop;

} while ((el = el.offsetParent));

return {x:x,y:y};

}

但实际来说,IE与标准浏览器早期的版本对这个offsetParent都有些bug,假如要谋略偏移量,还要使用offsetLeft与 offsetTop,而它们也有bug,是以上面的措施谋略的结果与实际进出很大年夜。在jQuery中,John Resig从新设计了这个函数,并且添加一系列帮助措施来获取浏览器响应的特性:

jQuery.fn.offset = function( options ) {

var elem = this[0];

if ( options ) {

return this.each(function( i ) {

jQuery.offset.setOffset( this, options, i );

});

}

if ( !elem || !elem.ownerDocument ) {

return null;

}

//特殊处置惩罚body

if ( elem === elem.ownerDocument.body ) {

return jQuery.offset.bodyOffset( elem );

}

//得到关于offset相关的浏览器特性

jQuery.offset.initialize();

var offsetParent = elem.offsetParent, prevOffsetParent = elem,

doc = elem.ownerDocument, computedStyle, docElem = doc.documentElement,

body = doc.body, defaultView = doc.defaultView,

prevComputedStyle = defaultView ? defaultView.getComputedStyle( elem, null ) : elem.currentStyle,

top = elem.offsetTop, left = elem.offsetLeft;

while ( (elem = elem.parentNode) && elem !== body && elem !== docElem ) {

//HTML,BODY,以及不具备CSS盒子模型的元素及display为fixed的元素没有offsetParent属性

if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" 亿博体育靠谱吗) {

break;

}

computedStyle = defaultView ? defaultView.getComputedStyle(elem, null) : elem.current亿博体育靠谱吗Style;

top-= elem.scrollTop;

left -= elem.scrollLeft;

if ( elem === offsetParent ) {

top+= elem.offsetTop;

left += elem.offsetLeft;

//offset应该返回的是border-box,但在一些表格元素却没有谋略它们的border值,必要自行添加

//在IE下表格元素的display为table,table-row与table-cell

if ( jQuery.offset.doesNotAddBorder && !(jQuery.offset.doesAddBorderForTableAndCells && /^t(able|d|h)$/i.test(elem.nodeName)) ) {

top+= parseFloat( computedStyle.borderTopWidth) || 0;

left += parseFloat( computedStyle.borderLeftWidth ) || 0;

}

prevOffsetParent = offsetParent, offsetParent = elem.offsetParent;

}

//修正safari的差错

if ( jQuery.offset.subtractsBorderForOverflowNotVisible && computedStyle.overflow !== "visible" ) {

top+= parseFloat( computedStyle.borderTopWidth) || 0;

left += parseFloat( computedStyle.borderLeftWidth ) || 0;

}

prevComputedStyle = computedStyle;

}

//着末加上body的偏移量

if ( prevComputedStyle.position === "relative" || prevComputedStyle.position === "static" ) {

top+= body.offsetTop;

left += body.offsetLeft;

}

//应用固定定位,可能呈现滚动条,我们要得到取大年夜的滚动间隔

if ( jQuery.offset.supportsFixedPosition && prevComputedStyle.position === "fixed" ) {

top+= Math.max( docElem.scrollTop, body.scrollTop );

left += Math.max( docElem.scrollLeft, body.scrollLeft );

}

return {

top: top,

left: left

};

};

如上所示,这种经由过程累加要领得到元素位置的措施异常不得民心,况且我还没有把它的帮助函数写出来呢!假如不是借助于框架,没有人乐意写这么一大年夜堆的函数来获取这两个值。然则,getBoundingClientRect的呈现与运用让环境大年夜为改不雅,乐得John Resig专门写了篇文章大年夜加赞美此措施。他的博客中心贴了一幅图,很直不雅地显示新措施在篇幅上的精简,更别提在机能上的改良了!下面是我的实现:

//by 司徒正美

coords = function( el ) {//取得元素(左上角)的坐标

if ( !el || !el.ownerDocument ) {

return null;

}

var pos = {

x:0,

y:0

},

owner = el.ownerDocument;

if(el.tagName === "BODY"){

pos.x = el.offsetTop;

pos.y = body.offsetLeft;

//http://hkom.blog1.fc2.com/?mode=m&no=750 body的偏移量是不包孕margin的

if(parseFloat(dom.getStyle(el,"margin-top"))!== el.offsetTop){

pos.x+= parseFloat( dom.getStyle(el, "margin-top") ) || 0;

pos.y+= parseFloat( dom.getStyle(el, "margin-left")) || 0;

}

return pos;

}else if(owner.getBoxObjectFor){//火狐

return owner.getBoxObjectFor(el);

}else if (el.getBoundingClientRect) { //假如支持getBoundingClientRect

//我们可以经由过程getBoundingClientRect来得到元素相对付client的rect.

//http://msdn.microsoft.com/en-us/library/ms536433.aspx

var box = el.getBoundingClientRect(),

root = owner.documentElement,

body = owner.getElementsByTagName("body")[0],

clientTop = root.clientTop || body.clientTop || 0,

clientLeft = root.clientLeft || body.clientLeft || 0;

// 加上document的scroll的部分尺寸到left,top中。

// IE中会自动加上2px的border,这里是去掉落document的边框大年夜小。

// http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx

pos.x = box.left + (self.pageYOffset || dom.feature.w3cBox && root.scrollTop|| body.scrollTop ) - clientTop,

pos.y = box.top+ (self.pageXOffset || dom.feature.w3cBox && root.scrollLeft || body.scrollLeft) - clientLeft;

}

return pos;

}

这只是CSSOM措施的运用的一个特例,在正确得到元素的样式时,我们会更频繁地运用到它们。在做殊效时,那几大年夜家族的呈现次数就更频繁。谢谢微软带给我们这些好器械。但假如你想弄清楚offsetWidth,clientWidth等的准确含义时,我建议照样请到火狐官网查看,微软现在连自己的器械都不能作主,这真可悲。

相关链接:

http://www.alanamos.de/articles/firefox_2+3_offset_attributes.html

http://www.w3.org/TR/cssom-view/

http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/CSSOM-offsetParent-prop.html

http://www.java2s.com/Code/JavaScript/HTML/UsingtheoffsetParentProperty.htm

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: