js实现一个文本过长隐藏点击展开的方法
时间: 2023-12-25 16:01:17 浏览: 34
要实现在网页上类似“点击展开”的功能,可以通过JavaScript来实现。首先,在HTML中设置一个固定高度的<div>元素,用来显示文本的部分内容。然后,在JavaScript中监听点击事件,当点击“展开”按钮时,通过改变<div>元素的高度,来显示全部的文本内容。
具体的步骤如下:
1. 在HTML中设置一个<div>元素,用来显示文本的部分内容,并给它设置一个固定的高度。
```html
<div id="text" style="height: 100px; overflow: hidden;">
这里是文本的部分内容...
</div>
<button id="expandBtn">展开</button>
```
2. 在JavaScript中编写函数,来实现点击展开的功能。
```javascript
document.getElementById('expandBtn').addEventListener('click', function() {
var text = document.getElementById('text');
if (text.style.height === '100px') {
text.style.height = 'auto';
this.innerText = '收起';
} else {
text.style.height = '100px';
this.innerText = '展开';
}
});
```
以上的代码中,当点击“展开”按钮时,会触发一个点击事件,然后通过改变<div>元素的高度来显示全部的文本内容。当再次点击“收起”按钮时,又会将<div>元素的高度还原到原来的高度,从而隐藏部分文本内容。
这样就实现了利用JavaScript在网页上展示“点击展开”文本的功能。