javascript使用substring实现的展开与收缩文字功能示例
更新时间：2019年06月17日 08:34:21 作者：longzhoufeng
这篇文章主要介绍了javascript使用substring实现的展开与收缩文字功能,涉及javascript元素遍历与属性设置相关操作技巧,需要的朋友可以参考下
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下：
效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 展开和收缩</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 href="javascript:;" rel="external nofollow" ><< 收缩</a>
</p>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript使用WebSocket实现实时通信的技术详解
WebSocket作为一种高效的通信协议,为开发者提供了一种在客户端和服务器之间进行全双工通信的方法,本文将深入探讨WebSocket技术,并提供实战代码示例2024-04-04
这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看2016-02-02
基于js与html相结合实现的流程进度展示条，非常实用，在各大网站都可以用到，下面小编给大家带来了JS与HTML结合实现流程进度展示条思路详解，需要的朋友参考下吧2017-09-09
TypeScript中的映射类型和数学中的映射类似,能够将一个集合的元素转换为新集合的元素,本文就来介绍一下TypeScript中类型映射的使用,感兴趣的可以了解一下2023-10-10
这篇文章主要为大家详细介绍了JavaScript实现前端倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
jsMind是一个显示/编辑思维导图的纯的javascript类库,其基于HTML5的帆布进行设计.jsMind以BSD协议开源,这篇文章主要给大家介绍了关于思维导图插件jsMind的详细使用指南,需要的朋友可以参考下2024-07-07
怎样调用动态获取的自定义对象的方法...2006-10-10
uni-app 项目中 “文件查找失败：‘crypto-js‘“ 的问题及解决方法
在开发使用 uni-app 框架的项目时,遇到依赖问题是常见的,本文将介绍如何解决编译过程中出现的 “文件查找失败：‘crypto-js’” 错误,并说明这种错误为什么会发生以及如何避免,下面分步骤给大家带来解决方案,感兴趣的朋友一起看看吧2024-07-07
下面小编就为大家带来一篇js判断空对象的实例(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
最新评论