jQuery相关的boxModel

此方法比较简单，但是可能很多使用过jQ的人不是很熟悉或者使用不频繁。

 

 

这个方法的作用：

 

 

• 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于true
• 通常在IE 6和IE 7的怪癖模式中这个值是false
• 在document准备就绪前，这个值是null

 

 

 

 

• 1.2版本只有$.boxModel这样的方法。

//jquery 1.2版本的
jQuery.extend({
        boxModel: !jQuery.browser.msie || document.compatMode == "CSS1Compat"
});

 

 

• 1.3版本建议使用$.support. boxModel

 

jQuery(function(){
     var div = document.createElement("div");
     div.style.width = "1px";
     div.style.paddingLeft = "1px";
     document.body.appendChild(div);
     jQuery.boxModel = jQuery.support.boxModel = div.offsetWidth ===2;
     document.body.removeChild(div);
});

 

 

 

• 1.4版本稍微改进了一下：

jQuery(function(){
    var div = document.createElement("div");
    div.style.width = div.style.paddingLeft = "1px";
    document.body.appendChild(div);

    jQuery.boxModel = jQuery.support.boxModel = div.offsetWidth === 2;
    document.body.removeChild(div).style.display = "none";    //@mark 变化
    div = null;
});

 

当然这个1.4的变化与boxModel的判断规则木有关系啊！！！！！！！！！！！！！！

扩展阅读：

http://zhangyaochun.iteye.com/blog/1231889   （document.compatMode浅谈动态绑定api）

http://zhangyaochun.iteye.com/blog/1674474  （isStrict---判断是否严格标准渲染模式）

---------------------- 写于2012-12-21 @理想国际 北京

 

We are still alive. So i will still write blogs!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

各位reader ..........2012快乐！