如何用原生js製作標題與內容保持4行的效果程式碼分享

在製作網頁或行動裝置有時會用到一個效果，類似文章標題和文章描述的排列總是保持一樣的行數，要么標題總是一行，多出的省略，要么標題內容1：3或2：2或3：1這樣，今天練習這樣的效果。

實現的原理：給標題和內容分別加上行高，取得標題的高度除以自身的行高，得知標題的行數，再分配內容的行數即可。

<style>
	*{padding: 0;margin: 0; font-family: &#39;Microsoft Yahei&#39;}
	.book{
		width: 320px;
		border: 1px solid #ccc;
	}
	.bookli{
		padding: 5px 10px;
		border-bottom: 1px solid #ccc;
	}
	.bookdiv{
		width: 300px;
		overflow: hidden;
	}
	.title{
		color:#666;
		margin: 10px 0;
		line-height: 23px;   //标题的行高
	}
	.desc{
		line-height: 23px;   //内容的行高
		overflow: hidden; 
	}
</style>

<h2 id="十大名花排行榜">十大名花排行榜</h2>
<div class="book">
	<ul>
		<li class="bookli">
			<div class="bookdiv">
				<h4 id="好一朵魅力的茉莉花">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 id="好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 id="好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 id="好一朵魅力的茉莉花">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
	</ul>
</div>

window.onload=function(){
	//兼容不能使用getElementsByClassName的浏览器
	function getClass(clas){
		var cls=document.getElementsByTagName('*');
		var arr=[];
		for(var i=0;i<cls.length;i++){
			if(clas==cls[i].className){
				arr.push(cls[i]);
			}
		}
		return arr;
	}
　　　　//控制行数的函数
	function controlRow(title,content){
		var title=getClass(title);
		var desc=getClass(content);
		var titleheight;
		var descheight;
		for(var j=0;j<title.length;j++){
			(function(index){
				// 获取css样式
				if(window.getComputedStyle!="undefined"){  //兼容火狐、谷歌等主流浏览器
					titleheight=window.getComputedStyle(title[index],null)[&#39;line-height&#39;];
					descheight=window.getComputedStyle(desc[index],null)[&#39;line-height&#39;];
				}else{   //兼容ie浏览器
					titleheight=title[index].currentStyle[&#39;line-height&#39;];
					descheight=desc[index].currentStyle[&#39;line-height&#39;];
				}
				var titleH=titleheight.substr(0,titleheight.length-2);
				var descH=descheight.substr(0,descheight.length-2);
				// 如果标题高度=行高，那么内容高度则是内容行高的3倍，内容+标题总是保持4行
				if(title[index].offsetHeight/titleH==1){
					desc[index].style.height=3*descH+&#39;px&#39;;
				}else if(title[index].offsetHeight/titleH==2){
					desc[index].style.height=2*descH+&#39;px&#39;;
				}else if(title[index].offsetHeight/titleH==3){
					desc[index].style.height=1*descH+&#39;px&#39;;
				}else{
					alert("sorry,浏览器不兼容");
				}
			})(j);
		}
	}
	controlRow(&#39;title&#39;,&#39;desc&#39;);
}

測試了Google和火狐狸。 ie被我卸了一個文件，打不開。所以沒測試。有測試的朋友也可以告訴我一聲，謝啦。

以上是如何用原生js製作標題與內容保持4行的效果程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！