檢測瀏覽器是否屬于W3C盒子模型
瀏覽器的盒子模型分為兩類，一類為標(biāo)準(zhǔn)的w3c盒子模型，另一類為IE盒子模型，兩者區(qū)別為在Width和Height這兩個(gè)屬性值中是否包含padding和border的值，w3c盒子模型不包含，IE盒子模型則包含，而在jQuery 中，可以通過$.support.boxModel對象返回的值，檢測瀏覽器是否屬于標(biāo)準(zhǔn)的w3c盒子模型。
例如，根據(jù)頁面的特征，并通過$.support.boxModel屬性的返回值，顯示當(dāng)前瀏覽器是否屬于標(biāo)準(zhǔn)的w3c盒子模型，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于打開的頁面屬于標(biāo)準(zhǔn)的w3c盒子模型，因此，在調(diào)用$.support.boxModel屬性時(shí)，返回true值。
任務(wù)
我來試試，親自調(diào)用$.support.boxModel屬性檢測頁面是否屬于標(biāo)準(zhǔn)盒子模型
在下列代碼的第19行，根據(jù)$.support.boxModel屬性的返回值，檢測當(dāng)前頁面是否屬于標(biāo)準(zhǔn)的盒子模型。
- ?不會(huì)了怎么辦
-
- 由于boxModel盒子模型是
$.support對象的一個(gè)屬性，因此，必須先獲取$.support對象，然后通過該對象調(diào)用boxModel屬性名進(jìn)行檢測。
- “boxModel”屬性名稱書寫是否正確，注意區(qū)分大小寫，因?yàn)楸臼纠捻撁嬷袆h除了<!DOCTYPE html>代碼，因此，boxModel屬性值為false。
因?yàn)樵诒臼纠?，主要檢測HTML標(biāo)記，不能沒有，否則檢測就沒有什么意義。另外，$.support.boxModel檢測的是瀏覽器是否屬于w3c標(biāo)準(zhǔn)盒子模型，如果是則返回true?，F(xiàn)在沒有HTML，那么將返回false，所以顯示IE盒子。
<html>
<head>
<title>檢測是否是盒子模型</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://yifanck.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測是否是盒子模型</span>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
$(function () {
var strTmp = "您打開的頁面是：";
if (?) { //是W3C盒子模型
strTmp += "W3C盒子模型";
}
else { //是IE盒子模型
strTmp += "IE盒子模型";
}
$(".content").html(strTmp);
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px;
background-color: #fff;
font-size: 13px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
