春天，大自然一片生机，天空则设计了一个优美的背景。淡蓝的颜色，有些透明，像一块在强烈光照下的蓝宝石，无暇的找不出半点疵瑕。云儿也不知上哪儿玩去了，剩下个特大特明亮的太陽，照得天空泛白。万物在这背景下都是那么的奇妙美好，无处不弥漫着陽光的气味。天空，多么像一位诗人，创造了春天这么美的意境！
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下：
效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.haodaima.com 展开和收缩</title>
<style>
p {
margin: 0 auto;
width: 500px;
padding: 20px;
border: 5px solid #888;
background-color: #ffcc33;
}
</style>
</head>
<script>
window.onload = function() {
var oP = document.getElementsByTagName("p")[0]
var oSpan = oP.getElementsByTagName("span")[0];
var oA = oP.getElementsByTagName("a")[0];
var str = oSpan.innerHTML;
var onOff=true;
oA.onclick = function() {
if(onOff) {
oSpan.innerHTML = str.substring(0, 22);
oA.innerHTML = "<< 展开"
} else {
oSpan.innerHTML = str.substring(0);
oA.innerHTML = "<< 收缩"
}
onOff=!onOff;
}
}
</script>
<body>
<p>
<span>2017年5月到6月，科学家们沿着澳大利亚海岸线向珊瑚海行进，他们从4000米深的海底收集到1000多种海洋生物，其中300多种是新物种。照片里的红色科芬鱼(coffinfish)长着蓝色眼睛，头上有个蓬松柔软的“钓竿”，这个钓竿能勾引猎物上钩。这是一种甲壳食肉动物，在深海中它是“拾荒者”，任何能提供营养的东西它们都能吃，包括腐烂的鲸鱼尸体。'这是发光的海蛇尾，它们用微弱的荧光警告那些捕食者，不要把它们当作食物。</span>...<a rel="nofollow noopener noreferrer" href="javascript：;" rel="external nofollow" ><< 收缩</a>
</p>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.haodaima.com/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
本文javascript使用substring实现的展开与收缩文字功能示例到此结束。脆弱的人，只懂得怜悯自已，而不知道反省自已。小编再次感谢大家对我们的支持！
