时间:2021-05-26
文章的篇幅往往不是那么恰到好处,如果以原有的篇幅展示,那么有可能会影响网页的布局或者美观度,这个时候就要根据情况适量截取一定的字符串,以适应布局,不过当点击一个按钮的时候依然可以展开全部的内容,下面就通过一个实例详细介绍一下如何实现此效果,代码示例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http:///" /><title>字符串截取展开效果</title><style type="text/css">#thediv{ width:200px; margin:0px auto;}</style><script type="text/javascript"> function cutStr(){ var odiv=document.getElementById("thediv"); var str=odiv.innerHTML; var ospan=document.createElement("span"); var olink=document.createElement("a"); ospan.innerHTML=str.substring(0,20); olink.innerHTML=str.length>20?"...":""; olink.href="###"; olink.onclick=function(){ if(olink.innerHTML=="..."){ olink.innerHTML="收起"; ospan.innerHTML=str; } else{ olink.innerHTML="..."; ospan.innerHTML=str.substring(0,20); } } odiv.innerHTML=""; odiv.appendChild(ospan); odiv.appendChild(olink); }; window.onload=function(){ cutStr();}</script> <body><div id="thediv">欢迎您,个人的力量再强也只是一只强壮的而已,如果有分享和胸怀和合作的精神,那么就有可能活得巨大进步。</div> </body></html>以上代码实现了我们的要求,截取指定的字符串,后面以"..."结尾,当点击这个结尾的时候,能够展开所有的文字内容,下面就介绍一下此效果的实现过程。
一.实现原理:
创建一个span元素和a元素,然后使用substring()函数截取指定的字符串并将其设置为span元素的内容,然后判断原来字符串的长度是否大于指定长度,如果大于,则将a元素中的内容设置为"..."。然后将原有div清空,然后span元素和a元素添加到div中去,这样就实现了截取功能。为a元素注册时间处理函数,点击此按钮就会执行事件处理函数,此函数首先判断是出于何种状态,如果处于收起状态,那么就会将a元素中的内容设置为"收起",并且将原有所有字符放入span,这样就实现了展开,如果出于展开状态,那么就是截取字符和修改a元素中的内容。原理大体如此,可以参阅相关阅读。
以上内容是本文给大家介绍的JavaScript截取指定长度字符串点击可以展开全部代码 ,希望大家喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
asp.net截取指定长度的字符串内容的代码: /// ///用于截取指定长度的字符串内容 /// ///用于截取的字符串 ///截取字符串的长度
截取指定长度字符串操作在网站建设中大量使用,尤其是在新闻列表这种类型的操作中大量应用。下面就是一个截取字符串代码实例:jQuery截取字符串操作*{margin
两个截取字符串的实用方法(超过一定长度自动换行)///截取字符串,不限制字符串长度//////待截取的字符串///每行的长度,多于这个长度自动换行///pu
复制代码代码如下://////将指定字符串按指定长度进行剪切,//////需要截断的字符串///字符串的最大长度///超过长度的后缀///如果超过长度,返回截断
本文实例讲述了C#区分中英文按照指定长度截取字符串的方法。分享给大家供大家参考。具体如下:这段C#代码用于按照指定的长度截取字符串,一个中文字符算2个字符,按照