js

jquery を使わないfix height

2014.5.19

スマホコーディングなど、「軽量化！軽量化！」と叫ばれる中でNo jQueryが求められる事がある。

そんなときには要素の高さをそろえる位は、jquery を使わずにやってしまいたい。

 

１．javascriptで、getElementsByClassNameが必要。 


function myGetElementsByClassName (_class , _tag , _id) {
	
	var targetId , elementList , classList ,  i , j , nodes = [];
	
	targetId = document.getElementById(_id);
	elementList = targetId.getElementsByTagName(_tag);	
	
	for (i=0; i < elementList.length ; i++ ) {
			classList = elementList[i].className.split(" ");			
			for (j=0; j < classList.length ; j++ ) {	
			if(classList[j] === _class){	
				nodes.push(elementList[i]);				
				break;					
			}
		}
	}		
	return nodes;

}

２．子要素の高さを取って、一番大きい物を付ける。

className : 高さ揃えをしたい要素のラッパークラス名
elemTagName : 高さ揃えをしたい要素のラッパータグ名
parentId : ラッパーの親ID
fixTargetTag : 高さを揃えたい要素のタグ名 

function fixHeight (className, elemTagName, parentId, fixTargetTag){
	 	var _this = this;

		var blocs = _this.getElementsByClass( className , elemTagName , parentId );

		var childTag = fixTargetTag;

		// check ie 7
		// var olderThanIE7 = (_this.isIE() && _this.isIE() < 8)? true : false;

		for (var i=0; i<blocs.length; i++)="" {="" var="" harr="[];" dls="blocs[i].getElementsByTagName(childTag);" for(var="" d="0;d

BLOG TOP