用子字符串扩展和收缩javascript实现文本功能的例子

本文给出了一个例子来描述用javascript实现的子串扩展和收缩文本的功能。分享给大家参考，如下：

效果如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' titlewww.jb51.net扩展和收缩/title style p { margin : 0 auto；宽度： 500 px；padding: 20pxborder: 5px固体# 888；背景-color : # ffcc 33；}/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.innerHTMLvar onOff=trueOA . onclick=function(){ if(onOff){ ospan . innerhtml=str . substring(0，22)；OA . innerhtml=' expand ' } else { ospan . innerhtml=str . substring(0)；OA.innerHTML=' shrink'} onOff=！onOff} }/scriptbodyspan 2017年5月至6月，科学家沿着澳大利亚海岸线向珊瑚海行进。他们从4000米深的海底采集了1000多种海洋生物，其中300多种是新物种。照片中的红色咖啡鱼有一双蓝色的眼睛，头上有一根蓬松的“鱼竿”，可以引诱猎物上钩。这是一种甲壳类食肉动物。它是深海中的“清道夫”。它可以吃任何能提供营养的东西，包括腐烂的鲸鱼尸体。这是一条发光的海蛇尾巴，它警告食肉动物不要把它们当作有微弱荧光的食物。/span.a href=' javascript:rel=' external nofollow ' shrink/a/p/body/HTML感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上面代码的运行效果。

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。