jQuery1.8のいくつかの小さな変化
2686 ワード
一,.width()と.Height()メソッド
1.8 css属性box-sizingのサポートが追加され、1.7.2との違いに注意する必要があります.1.7.2以前のバージョンでは、box-sizing:border-boxを定義するかどうかにかかわらず、paddingおよびborderを除くボックスモデル内の要素コンテンツの幅または高さを返します.
1.8以降は異なり、cssプロパティbox-sizing:box-borderが設定されている場合、width()を使用して返される数値がcssで設定されている値と異なる可能性があります.のように
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
#container {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 500px;
padding: 5px;
border: 5px solid gold;
}
</style>
<script src="js/jquery-1.8.0.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var $el = $('#container')
var w = $el.width();
console.log(w)
</script>
</body>
</html>div[id=container]のbox-sizingはborder-boxに設定されている(Firefox 14.1ではborder-boxはサポートされておらず、-moz-border-boxが使用されている).
width:500 pxの設定に加えてpaddingとborderはそれぞれ5 pxに設定されています.各ブラウザの印刷結果は以下の通りです.
IE6/7 : 500
IE8/9/10: 480
Safari5/6: 480
Chrome21/Firefox14: 480
IE 6/7はbox-sizingをサポートせず、出力は依然として500である.しかし、この熟知したブラウザをサポートするときに出力される結果は480(ボックスモデルのborderとpaddingを削った)である.したがって1.8ではbox−sizing属性の使用によるwidthとheightの結果の変化に注意する必要がある.
二,.そしてouterHeight()メソッド
1.7.2以降、outerWidth/outerHeightはgetterとしてのみ使用されています.trueを転送しない場合は要素の幅や高さ(paddingとborderを含む)を返し、trueを転送する場合は(もちろん数字1を転送することもできます)戻り値にmarginを加えます.
1.8以降はsetter機能があり、取得時にmarginを計算したい場合はtrueしか伝わらず、数字1などは伝わらない.伝数1などはjQuery内部で要素幅を設定するように処理されるからだ.また、返されるのは数字ではなくjQueryオブジェクトです(jQueryの他のsetterと同じです).
関連:
http://www.w3.org/TR/css3-box/
http://www.w3.org/TR/2002/WD-css3-box-20021024/
https://developer.mozilla.org/en-US/docs/CSS/box-sizing