ネイティブ 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 中国語 Web サイトの他の関連記事を参照してください。