js实现内容的展开和收缩

最新推荐文章于 2023-11-05 21:06:59 发布

喵cat

最新推荐文章于 2023-11-05 21:06:59 发布

阅读量1.7k

点赞数 1

分类专栏： web前端文章标签： js 展开收缩

本文链接：https://blog.csdn.net/hwqdmn1234/article/details/101281815

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            border: 1px solid #ccc;
        }
    </style>
    <script>
        window.onload = function () {
            // 找对象
            var box = document.getElementById('box');
            var span = box.getElementsByTagName('span')[0];
            var oA = box.getElementsByTagName('a')[0];
            // 定义一个变量接受需要原来的内容，方面对内容进行操作。
            var str = span.innerHTML;
            // 定义一个开关，如果为true，则执行if语句，如果为false，则执行else语句。
            var tag = true;
            // 点击收缩的时候，文字收缩
            oA.onclick = function () {
                if (tag) {//如果开关tag为true，截取字符串str，截取20个字符。截取字符串的方法substring()
                //substring(start,stop)。截取字符串，从下标为start开始，到下标为stop结束。截取位置包括开始，不包括结束
                    span.innerHTML = str.substring(0, 20) + '......';
                    //把收缩更改为展开。
                    oA.innerHTML = '展开>>';
                    // 把开关tag赋值为false。
                    tag = false;
                }else{
                    span.innerHTML = str;
                    oA.innerHTML = '收缩>>';
                    tag = true;
                }

            }
        }
    </script>
</head>

<body>
    <div id="box">
        <span>素胚勾勒出青花笔锋浓转淡,瓶身描绘的牡丹一如你初妆,冉冉檀香透过窗心事我了然,宣纸上走笔至此搁一半,釉色渲染仕女图韵味被私藏,而你嫣然的一笑如含苞待放,你的美一缕飘散,去到我去不了的地方,天青色等烟雨
            ，而我在等你,炊烟袅袅升起,隔江千万里,在瓶底书刻隶仿前朝的飘逸就当我为遇见你伏笔</span><a href="javascript:;">收缩>></a>
    </div>
</body>

</html>

喵cat

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
js实现内容的展开和收缩

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫