HTML 如果 div 内容很长显示按钮

Question

我有自己制作的这个 django 应用程序，它是一个博客应用程序。博客很长，所以如果博客很长，我希望能够显示一点然后再显示更多 div 的文本。这是我的 html:

<a style="text-decoration: none;color: #000;" href="{%  url 'post-detail' post.id  %}">
   <div id="content-blog"><p class="article-content">{{ post.content|safe }}</p></div>
</a>

我想要这样的东西：

<script>
content = document.getElementById("content-blog");
max_length = 1000 //characters
if(content > max_length){
//Do something
}
</script>

那么我怎样才能让它真正起作用。总而言之，我希望它检查 div 是否超过 1000 个字符，如果超过 1000 个字符，则运行上面的 if 语句。谢谢

Answer 1

您需要使用innerText，请将您的JS代码修改为

<script>

var content=document.getElementById("content-blog").innerText.length;

max_length = 1000 //characters
if(content > max_length){
//Do something
}
</script>

Answer 2

获取所有博客并对它们全部执行操作：

let blogs = Array.prototype.slice.call(document.getElementsByClassName("article-content"));

blogs.forEach(blog => 
    if (blog.innerText.length > 1000) {

// Do stuff with the blog

    } else {}
)

您还可以修改视图中的上下文，或将模型属性添加到您的博客模式，为博客 post 创建一个 preview_text。喜欢 post.content[:100] post.

的前 100 个字符

HTML 如果 div 内容很长显示按钮

HTML if div content is long show button

html

javascript

django

counter

if-statement