文字收缩、展开（默认展开）

最新推荐文章于 2023-12-29 00:00:00 发布

原创最新推荐文章于 2023-12-29 00:00:00 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现网页中文字展开与收缩效果的方法。通过使用HTML、CSS和JavaScript，可以轻松地为页面上的文本添加交互式的显示效果。具体包括如何获取页面元素、设置初始显示文本、以及监听点击事件来切换文本的显示状态。

这里写图片描述

html：

<p><span>JavaScript 是属于网络的脚本语言！...</span><a href="javascript:;">>>收缩</a></p>

css：

a {text-decoration: none;}/* 去掉a的默认下划线*/

js：

var oP = document.getElementsByTagName('p')[0];
var oSpan = document.getElementsByTagName('span')[0];
var oA = document.getElementsByTagName('a')[0];
var str = oSpan.innerHTML;//获取文字内容，方便隐藏和显示
var onOff = true;//开关

oA.onclick = function(){
    if(onOff){
        oSpan.innerHTML = str.substring(0,18);
        oA.innerHTML = '......>>展开';
    }else{
        oSpan.innerHTML = str;
        oA.innerHTML = '<<收缩';                  
    }
    onOff = !onOff;//每次点击之后都取反
};