文字展开和收起

Posted 2020-10-16 carol72

html

<div class="box">
	<span>
		javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
		JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
	</span>
	<a href="javascript:;">收起》》</a>
</div>

CSS

*{
	margin: 0;
	padding: 0;
}
.box{
	margin: 0 auto;
	width: 300px;
}

JS

	var oP=document.getElementsByTagName("span")[0];
	var oBtn=document.getElementsByTagName("a")[0];
	var onOff=true;
	var TxT=oP.innerHTML; 
	oBtn.onclick=function(){
		if(onOff){
			oP.innerHTML=TxT.slice(0,50);
			oBtn.innerHTML="展开》》";
		}else{
			oP.innerHTML=TxT;
			oBtn.innerHTML="收起》》";
		}
		onOff=!onOff;
	}