jQuery相关的boxModel

最新推荐文章于 2022-01-27 13:35:41 发布

iteye_2245

最新推荐文章于 2022-01-27 13:35:41 发布

阅读量108

点赞数

分类专栏： jQuery源码浅析文章标签： boxModel

jQuery源码浅析专栏收录该内容

43 篇文章 0 订阅

订阅专栏

此方法比较简单，但是可能很多使用过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快乐！