https://www.hitachi-ite.co.jp/js/h1/add/equal_height.js

1/**
2 * 要素の高さを揃える。
3 * @param arg 次の設定値をまとめたオブジェクト
4 *    elemTagName    高さを揃える要素のタグ名
5 *    elemClass      高さを揃える要素のclass
6 *    parentTagName  高さを揃える要素の親（祖先）のタグ名
7 *    parentClass    高さを揃える要素の親（祖先）のclass
8 *    interval       高さを更新する間隔
9 */
10function EqualHeight(arg) {
11
12	if((!document.getElementById)||(!document.getElementsByTagName)||(!document.createElement)) { return; }
13	if((!arg.elemTagName)||(!arg.elemClass)||(!arg.parentTagName)||(!arg.parentClass)) {
14		return;
15	}
16
17	var elemTagName = arg.elemTagName;
18	var elemClass = arg.elemClass;
19	var parentTagName = arg.parentTagName;
20	var parentClass = arg.parentClass;
21	var interval = arg.interval;
22
23	var criterion;
24	var criterionHeight = 0;
25
26	var parents = [];
27
28	initialize();
29
30
31	/**
32	 * タイマー設定
33	 */
34	function initialize() {
35
36		var root = document.getElementsByTagName("body")[0];
37		parents = getElementsByTagAndClass(root, parentTagName, parentClass);
38
39		criterion = setCriterion();
40
41		if((parents.length > 0) && (criterion != null)){
42			main();
43			setInterval(timerHandler, interval);
44		}
45	}
46
47
48	/**
49	 * 文字サイズが変更されたかどうかを判定するための要素を生成する。
50	 * @returns 生成した要素
51	 */
52	function setCriterion() {
53
54		var criterion = document.createElement("div");
55		var criterionText = document.createTextNode("H");
56		criterion.appendChild(criterionText);
57		criterion.style.visibility = "hidden";
58		criterion.style.position = "absolute";
59		criterion.style.top = "0";
60		var body = document.getElementsByTagName("body")[0];
61		body.appendChild(criterion);
62
63		return criterion;
64	}
65
66
67
68	/**
69	 *
70	 */
71	function timerHandler() {
72		main();
73	}
74
75
76	/**
77	 * 一定時間（inteval）ごとに実行する処理
78	 */
79	function main() {
80
81		//文字サイズが変わっていない場合は、終了
82		if((criterionHeight != 0) && (criterionHeight == criterion.offsetHeight)) return;
83
84		criterionHeight = criterion.offsetHeight;
85
86		var parentsCount = parents.length;
87		var parent;
88		for(var i=0; i<parentsCount; i++) {
89			parent = parents[i];
90			setElemHeight(parent, elemTagName, elemClass);
91		}
92	}
93
94
95
96	/**
97	 * 高さを最大値に揃える
98	 * @param parent 高さを揃える要素達の親要素
99	 * @param elemTag 高さを揃える要素達のタグ名
100	 * @param elemClass 高さを揃える要素達のclass名
101	 */
102	function setElemHeight(parent, elemTag, elemClass) {
103
104		//高さを揃える対象となる要素
105		var elems = getElementsByTagAndClass(parent, elemTag, elemClass);
106		var elemsCount = elems.length;
107
108		//対象がない場合は終了
109		if(elemsCount == 0)return;
110
111		//heightをいったんautoに
112		for(var i=0; i<elemsCount; i++) {
113			elem = elems[i];
114			elem.style.height = "auto";
115		}
116
117		//heightが一番大きい要素
118		var maxHeightElem = getMaxHeightElem(elems);
119		var maxHeight = maxHeightElem.offsetHeight;
120
121		var elem;
122		var elemHeight;
123		var verticalPadding = 0;
124		var verticalBorder = 0;
125
126		for(i=0; i<elemsCount; i++) {
127
128			elem = elems[i];
129
130			//一番高い要素の場合はスキップ
131			if(elem == maxHeightElem) { continue; }
132
133			var elemStyle = elem.currentStyle || window.getComputedStyle(elem, null);
134			if(!elemStyle) return;
135
136			verticalPadding = 0;
137			verticalBorder = 0;
138
139			//上下のpaddingを取得
140			if(!isNaN(parseInt(elemStyle.paddingTop))) {
141				verticalPadding += parseInt(elemStyle.paddingTop);
142			}
143			if(!isNaN(parseInt(elemStyle.paddingBottom))) {
144				verticalPadding += parseInt(elemStyle.paddingBottom);
145			}
146
147			//上下のborder-widthを取得
148			if((elemStyle.borderTopStyle != "none") && (!isNaN(parseInt(elemStyle.borderTopWidth)))) {
149				verticalBorder += parseInt(elemStyle.borderTopWidth);
150			}
151			if((elemStyle.borderBottomStyle != "none") && (!isNaN(parseInt(elemStyle.borderBottomWidth)))) {
152				verticalBorder += parseInt(elemStyle.borderBottomWidth);
153			}
154
155			elemHeight = maxHeight - verticalPadding - verticalBorder;
156			elem.style.height = elemHeight + "px";
157		}
158	}
159
160
161
162	/**
163	 * 引数に指定した要素のうち、高さが一番大きい要素を返す
164	 * @param elems 対象の要素の集合
165	 * @return 高さが一番大きい要素
166	 */
167	function getMaxHeightElem(elems) {
168
169		var elemsCount = elems.length;
170		var maxHeightElem = null;
171		var maxHeight = 0;
172
173		for(var i=0; i<elemsCount; i++) {
174			elem = elems[i];
175			if(maxHeight < elem.offsetHeight) {
176				maxHeight = elem.offsetHeight;
177				maxHeightElem = elem;
178			}
179		}
180		return maxHeightElem;
181	}
182
183
184
185	/**
186	 * 特定のタグ/classに一致した要素を取得
187	 * @param parentNode 検索範囲の親となる要素
188	 * @param tagName 検索するタグ
189	 * @param classValue 検索するclass属性
190	 * @return 一致した要素の配列
191	 */
192	function getElementsByTagAndClass(parentNode, tagName, classValue){
193
194		var elementsByTag = parentNode.getElementsByTagName(tagName);
195
196		var elementsByTagAndClass = [];
197
198		//タグ名が一致した子がいる
199		if(elementsByTag.length > 0){
200
201			//引数のclassが省略されている
202			if((classValue == null)||(classValue == "")){
203				return elementsByTag;
204			}else{
205
206				var len = elementsByTag.length;
207				for(var i=0; i<len; i++){
208					//引数と同じclassが指定されている
209					if(hasClass(elementsByTag[i], classValue)){
210						elementsByTagAndClass.push(elementsByTag[i]);
211					}
212				}
213				return elementsByTagAndClass;
214			}
215		}
216		return elementsByTagAndClass;
217	}
218
219
220
221	/**
222	 * 特定のclassが指定されているか
223	 * @param elem 対象の要素
224	 * @param classValue チェックするclass名
225	 * @return 指定されているかどうか(true/false)
226	 */
227	function hasClass(elem, classValue){
228
229		if(elem.className == "") return false;

230
231		var classText = elem.className;
232
233		//classが一つ
234		if(classText.indexOf(" ") == -1){
235			if(classText == classValue){
236				return true;
237			}else{
238				return false;
239			}
240
241		//classが複数
242		}else{
243			var classes = classText.split(" ");
244			var len = classes.length;
245			for(var i=0; i<len; i++){
246				if(classes[i] == classValue){
247					return true;
248				}
249			}
250			return false;
251		}
252	}
253
254
255
256	/**
257	 * リスナの設定
258	 */
259	function addListener(elem, eventType, func, cap) {
260		if(elem.addEventListener) {
261			elem.addEventListener(eventType, func, cap);
262		} else if(elem.attachEvent) {
263			elem.attachEvent('on' + eventType, func);
264		} else {
265			return false;
266		}
267	}
268}
269