要素サイズの取得(JavaScriptとjQuery)

4882 ワード

JavaScript

コードを書くときによく使う要素の幅、高さはgetComputedStyle(dom)[「width」でいいですが、ちょっと面倒で、domは要素の幅の高い値を取得するショートカットを提供しています.
    getComputedStyle
戻り値タイプ:文字列string
戻り値:コンテンツ幅content
JavaScriptショートカット要素サイズの取得
1.ClientWidth取得要素の幅(content+padding)
    element.clientWidth
戻り値タイプ:数値number
戻り値:コンテンツ幅content+padding
2.ClientHeight取得要素の高さ
    element.clientHeight
戻り値タイプ:数値number
戻り値:コンテンツ高content+padding




	
	Document


	
		//                、 ，     getComputedStyle，       ，
		// dom               
		//     
		var box = document.getElementById("box");
		//          
		console.log("clientWidth :" + box.clientWidth) 
		console.log("clientHeight :" + box.clientHeight) 
		console.log(getComputedStyle(box)["width"])
		//   ： clientWidth      content + padding 
		//        number
		// getComputedStyle(box)["width"]     content
		//        string

3.offsetWidth取得要素の幅(content+padding+border)
element.offsetWidth
戻り値タイプ:数値number
戻り値:コンテンツ幅content+padding+border
4.offsetHeight取得要素の高さ(content+padding+border)
element.offsetHeight
戻り値タイプ:数値number
戻り値:コンテンツ高content+padding+border




	
	Document


	
		//                、 ，     getComputedStyle，       ，
		// dom               
		//     
		var box = document.getElementById("box");
		//          
		console.log("offsetWidth :" + box.offsetWidth) 
		console.log("offsetHeight :" + box.offsetHeight) 
		//   ：offsetWidth       content + padding + border
		//        number

まとめ:
clientWidth
要素content+paddingの幅を取得
clientHeight
要素content+paddingの高さを取得
offsetWidth
要素content+padding+borderの幅を取得
offsetHeight
要素content+padding+borderの高さを取得
5.clientLeft要素の左枠線の値を取得する
element.clientLeft
戻り値タイプ:数値number
戻り値:border-leftの値
6.clientTop要素の上枠の値を取得する
element.clientTop
戻り値タイプ:数値number
戻り値:border-topの値




	
	Document


	
		//                、 ，     getComputedStyle，       ，
		// dom               
		//     
		var box = document.getElementById("box");
		//          
		console.log("clientLeft  :" + box.clientLeft) 
		console.log("clientTop  :" + box.clientTop) 
		//   ： clientLeft            。
		//   ： clientTop            。

まとめ:
clientLeft
要素の左枠線の値を取得
clientTop
要素の上辺の値を取得
jQueryエレメントサイズのショートカット取得
jQueryメソッド
戻り値の意味
戻り値のタイプ
element.width()
要素contentセクションの幅を取得
number
element.height()
要素contentセクションの高さを取得
number
element.innerWidth()
要素content+paddingセクションの幅を取得
number
element.innerHeight()
要素content+paddingセクションの幅を取得
number
element.outerWidth()
要素content+padding+borderセクションの幅を取得
number
element.outerHeight()
要素content+padding+borderセクションの幅を取得
number
element.outerWidth(true)
要素content+padding+border+margin部分の幅を取得
number
element.outerHeight(true)
要素content+padding+border+margin部分の幅を取得
number




	
	Document


	
	
	// // content   
	// console.log($("#box").width())
	// console.log($("#box").height())

	// content + padding 
	// console.log($("#box").innerWidth())
	// console.log($("#box").innerHeight())

	// content + padding + border
	// console.log($("#box").outerWidth())
	// console.log($("#box").outerHeight())

	// content + padding + border + margin
	console.log($("#box").outerWidth(true))
	console.log($("#box").outerWidth(true))

テンプレートマッチ修正版

tableの行をクリックしてcheckboxを選択し、行の色を変更します.