本文实例讲述了JavaScript实现隐藏省略文字效果的方法。分享给大家供大家参考,具体如下:
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=GB2312 "/比;
& lt; title> JS
& lt;/head>
& lt; body>
& lt; div id=澳谌荨痹谟幸恢中奶蟹畔?有一种境界叫舍得;有一种幸福叫守候;有一种智慧叫低调;有一种选择叫放弃;有一种明白叫糊涂;有一种心态叫包容;有一种快乐叫简单,有一种美德叫微笑,有一种幸福叫珍惜;有一种美丽叫自信;有一种感动叫分享;有一种真情叫关爱;有一种温暖叫感恩;有一种成功叫坚持。
& lt;/div>
& lt;脚本语言=癹avascript”比;
(函数(){
var len=50;//默认显示的字数
var内容=. getelementbyid(“内容”);//内容获取内容div对象
var文本=content.innerHTML;//文本为内容
var跨度=document.createElement(“跨度”);//创建一个跨度标签
var n=document.createElement (“a”);//创建一个一个标签
跨度。innerHTML=text.substring (0, len);//跨度标签的内容为文本的前len个字符
n。innerHTML=文本。长度比;len & # 63;“. .展开”:“”;//创建的一个标签内容,如果内容字数大于兰,那么为“…展开”,否则为空
n。href=" javascript:无效(0)”;//设置一个标签的链接地址(随意)
n。onclick=function(){//点击一个链接执行下面函数//如果一标签的内容为“. .展开”,那么一个标签内容变成“收”起,跨度标签的内容为DIV全部内容,否则内容为前len个字符
如果(n。innerHTML==" . .展开”){
n。innerHTML="收起”;
跨度。innerHTML=文本;
其他}{
n。innerHTML=" . .展开”;
跨度。innerHTML=text.substring (0, len);
}
}
内容。innerHTML=" ";//设置DIV内容为空
content.appendChild(跨度);//把跨度元素加到DIV中
content.appendChild (n);//把一元素加到DIV中
}) ();
& lt;/script>
& lt;/body>
& lt;/html>
之前
效果图:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript字符与字符串操作技巧总结》,《JavaScript切换特效与技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
