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

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

erdouzhang

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

阅读量2.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/erdouzhang/article/details/77319582

版权

js 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

这里写图片描述

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;//每次点击之后都取反
};