jQuery相关的boxModel

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

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

文章标签：

#boxModel

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

43 篇文章

订阅专栏

本文深入解析了jQuery中boxModel方法从1.2版本到1.4版本的发展变化，包括其作用、判断规则及在不同浏览器环境下的表现。通过创建div元素并设置样式，最终判断当前页面是否遵循W3CCSS盒式模型渲染，从而揭示了这一方法在不同浏览器版本间的差异。同时，文章引用相关扩展阅读，为读者提供了更深入的理解路径。

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