评论区点击查看更多功能的实现

思路：

对内容的高度进行判断，如果内容的高度大于设定的值，将内容的高度设定为固定值，同时将‘查看更多’的节点上树。实现还是挺简单的，直接看代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 这是最外层的容器，这里没有设置高度，所以它的高度是随着内容的变化而变化的 */.comment {width: 560px;padding: 15px 10px;margin: 10px;overflow: hidden;position: relative;}/* 清除浮动*/.comment::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}/* 这是点击‘查看更多’的样式*/.span {position: absolute;width: 100%;display: block;bottom: 0;cursor: pointer;color: orangered;text-align: center;background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);}/* 这是头像的样式*/.img {height: 48px;width: 48px;border-radius: 24px;display: block;float: left;margin-top: 10px;}/* 这是评论内容的样式*/.p {float: left;width: 500px;margin-left: 12px;}</style></head><body><!-- 评论书写区 --><textarea name="" id="textarea" cols="80" rows="10"></textarea><!--  发布按钮--><button class="post">点击发布</button><!-- 这是评论列表 --><div class="list"></div><script>const textarea = document.getElementById('textarea');const list = document.getElementsByClassName('list')[0];const post = document.getElementsByClassName('post')[0];//为发布按钮绑定响应事件post.onclick = function() {//获取评论书写区的内容并判断let content = textarea.value;if (content) {//创建节点let discuss = document.createElement('p');let comment = document.createElement('div');let more = document.createElement('span');let img = document.createElement('img');//为节点添加样式和设置内容img.className = 'img';discuss.className = 'p';more.className = 'span';comment.className = 'comment';img.src = '../作业/img/pic_2.jpg';more.innerHTML = '查看更多';discuss.innerHTML = content;//节点上树comment.appendChild(img);comment.appendChild(discuss);list.appendChild(comment);
//判断内容的高度，如果超过100px则设置固定高度并添加‘查看更多’if (discuss.offsetHeight > 100) {//alert(comment.offsetHeight)discuss.style.height = 100 + 'px';comment.appendChild(more);}//为‘查看更多’添加点击事件，将内容的高度设置为auto，并将‘查看更多’隐藏more.onclick = function() {discuss.style.height = 'auto';more.style.display = 'none';}} else {alert("请输入内容");}}</script></body>
</html>

原生JS实现点击查看更多相关推荐

js实现加载所有内容点击查看更多
功能:过长文章内容实现通过查看更多实现 js代码直接套, 示例CSS 请忽视, 具体根据需求设置 <!DOCTYPE html> <head><meta http-eq ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
女神推荐, 卡片,广告图 ,点击查看更多
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: <view><view class='title'>女神推荐 </vie ...
jQuery点击查看更多，列表陆续显示
jQuery点击查看更多图片演示效果: jQuery点击查看更多 HTML代码: <div class="gallerywrap"><div class=&qu ...
直播电商平台开发，点击查看更多显示所有内容
直播电商平台开发,点击查看更多显示所有内容实现代码: mainactivity.xml: <?xml version="1.0" encoding="utf-8& ...
点击查看更多进行分页，uniapp，分页请求
感觉下滑分页没有点击分页简单好用,记录一下,自己瞎写的 <view style="text-align: center;color: #737373;font-size: 12px;& ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
vue中点击查看更多实现
场景: vue2.6.11 中,通过v-for循环list,只想显示前五条,后面的几条要通过查看更多按钮来展示. 如图解决方案: 列如:list 长度为10,你只想显示前3条,后面几条要通过点击按钮 ...

原生JS实现点击查看更多

评论区点击查看更多功能的实现

思路：

原生JS实现点击查看更多相关推荐

最新文章

热门文章