4-2 检测浏览器是否属于W3C盒子模型
本节编程练习不计算学习进度,请电脑登录imooc.com操作

检测浏览器是否属于W3C盒子模型

浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel对象返回的值,检测浏览器是否属于标准的w3c盒子模型。

例如,根据页面的特征,并通过$.support.boxModel属性的返回值,显示当前浏览器是否属于标准的w3c盒子模型,如下图所示:

在浏览器中显示的效果:

从图中可以看出,由于打开的页面属于标准的w3c盒子模型,因此,在调用$.support.boxModel属性时,返回true值。

任务

我来试试,亲自调用$.support.boxModel属性检测页面是否属于标准盒子模型

在下列代码的第19行,根据$.support.boxModel属性的返回值,检测当前页面是否属于标准的盒子模型。

  1. <html>
  2. <head>
  3. <title>检测是否是盒子模型</title>
  4. <link href="style.css" rel="stylesheet" type="text/css" />
  5. <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
  6. </head>
  7.  
  8. <body>
  9. <div id="divtest">
  10. <div class="title">
  11. <span class="fl">检测是否是盒子模型</span>
  12. </div>
  13. <div class="content"></div>
  14. </div>
  15.  
  16. <script type="text/javascript">
  17. $(function () {
  18. var strTmp = "您打开的页面是:";
  19. if (?) { //是W3C盒子模型
  20. strTmp += "W3C盒子模型";
  21. }
  22. else { //是IE盒子模型
  23. strTmp += "IE盒子模型";
  24. }
  25. $(".content").html(strTmp);
  26. });
  27. </script>
  28. </body>
  29. </html>
  1. #divtest
  2. {
  3. width: 282px;
  4. }
  5. #divtest .title
  6. {
  7. padding: 8px;
  8. background-color: Blue;
  9. color: #fff;
  10. height: 23px;
  11. line-height: 23px;
  12. font-size: 15px;
  13. font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17. padding: 8px;
  18. background-color: #fff;
  19. font-size: 13px;
  20. }
  21. .fl
  22. {
  23. float: left;
  24. }
  25. .fr
  26. {
  27. float: right;
  28. }
下一节