네이티브 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>十大名花排行榜</h2>
<div class="book">
	<ul>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花好一朵魅力的茉莉花</h4>
				<p class="desc">茉莉花，别名：茉莉，拉丁文名：木犀科、素馨属直立或攀援灌木，高达3米。小枝圆柱形或稍压扁状，有时中空，疏被柔毛。叶对生，单叶，叶片纸质，圆形、椭圆形、卵状椭圆形或倒卵形，两端圆或钝，基部有时微心形，在上面稍凹入或凹起，下面凸起，细脉在两面常明显，微凸起，除下面脉腋间常具簇毛外，其余无毛；裂片长圆形至近圆形，先端圆或钝。果球形，呈紫黑色。</p>
			</div>
		</li>
		<li class="bookli">
			<div class="bookdiv">
				<h4 class="title">好一朵魅力的茉莉花</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 및 Firefox에서 테스트되었습니다. IE에서 파일을 삭제했는데 열 수 없습니다. 그래서 나는 그것을 테스트하지 않았습니다. 테스트해 본 친구들도 나에게 고맙다고 말할 수 있다.

위 내용은 네이티브 js를 사용하여 4줄의 효과 코드 공유를 유지하는 제목과 콘텐츠를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!