如何实现c呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮,点击折叠又变成了展开,并且,折叠后又像是20字内了!下面奇芳阁就分享一下通过JS截取字符串实现展开收起(折叠)的功能!
获取div中的文本内容,然后动态创建一个div和和a对象,如果文章的内容超过指定的字数,那么就会截取指定的 字符串,然后将截取的内容放入创建的div中,a对象中的内容也设置为“...显示全部”,这样就实现了默认状态的收起效果。当点击显示全部后,会将原来 box中的内容全部放到新创建的div中,并且将a对象中的内容设置为"收起"。基本就是这个原理实现的此效果。
<html>
<head><meta charset="utf-8">
<title>点击显示全文效果</title>
<style type="text/css">
#box
{
width:680px;
height:200px;
}
</style>
<script type="text/javascript">
function show()
{
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,20);
btn.innerHTML = text.length > 20 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if(btn.innerHTML == "...显示全部")
{
btn.innerHTML = "收起";
newBox.innerHTML = text;
}
else
{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,20);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
window.οnlοad=function()
{
show();
}
</script>
</head>
<body>
<div id="box">
如何实现c呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮,点击折叠又变成了展开,并且,折叠后又像是20字内了!下面奇芳阁就分享一下通过JS截取字符串实现展开收起(折叠)的功能!
获取div中的文本内容,然后动态创建一个div和和a对象,如果文章的内容超过指定的字数,那么就会截取指定的 字符串,然后将截取的内容放入创建的div中,a对象中的内容也设置为“...显示全部”,这样就实现了默认状态的收起效果。当点击显示全部后,会将原来 box中的内容全部放到新创建的div中,并且将a对象中的内容设置为"收起"。基本就是这个原理实现的此效果。
<html>
<head><meta charset="utf-8">
<title>点击显示全文效果</title>
<style type="text/css">
#box
{
width:680px;
height:200px;
}
</style>
<script type="text/javascript">
function show()
{
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,20);
btn.innerHTML = text.length > 20 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if(btn.innerHTML == "...显示全部")
{
btn.innerHTML = "收起";
newBox.innerHTML = text;
}
else
{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,20);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
window.οnlοad=function()
{
show();
}
</script>
</head>
<body>
<div id="box">
奇芳阁(原名:三次元世界)是一个分享精品绿色便携软件、实用绿色软件、互联网免费资源下载的绿软分享吧部落格。免费资源部落社区天天更新大量精选实用的绿色软件,并提供真实客观的软件测评.
</div>
</body>
</html>
君不见黄河之水天上来,奔流到海不复回。
君不见高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子、丹丘生,将(qiāng)进酒,杯莫停。
与君歌一曲,请君为我倾耳听:
钟鼓馔(zhuàn)玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐(lè),斗酒十千恣欢谑(xuè)。
主人何为言少钱,径(jìng)须沽取对君酌。
五花马,千金裘,呼儿将(jiāng)出换美酒,
与尔同销万古愁。
</body>
</html>
如何实现c呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮,点击折叠又变成了展开,并且,折叠后又像是20字内了!下面奇芳阁就分享一下通过JS截取字符串实现展开收起(折叠)的功能!
获取div中的文本内容,然后动态创建一个div和和a对象,如果文章的内容超过指定的字数,那么就会截取指定的 字符串,然后将截取的内容放入创建的div中,a对象中的内容也设置为“...显示全部”,这样就实现了默认状态的收起效果。当点击显示全部后,会将原来 box中的内容全部放到新创建的div中,并且将a对象中的内容设置为"收起"。基本就是这个原理实现的此效果。
<html>
<head><meta charset="utf-8">
<title>点击显示全文效果</title>
<style type="text/css">
#box
{
width:680px;
height:200px;
}
</style>
<script type="text/javascript">
function show()
{
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,20);
btn.innerHTML = text.length > 20 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if(btn.innerHTML == "...显示全部")
{
btn.innerHTML = "收起";
newBox.innerHTML = text;
}
else
{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,20);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
window.οnlοad=function()
{
show();
}
</script>
</head>
<body>
<div id="box">
奇芳阁(原名:三次元世界)是一个分享精品绿色便携软件、实用绿色软件、互联网免费资源下载的绿软分享吧部落格。免费资源部落社区天天更新大量精选实用的绿色软件,并提供真实客观的软件测评.
</div>
</body>
</html>