JS 点击按钮显示更多内容的解决办法
内容摘要
这篇文章主要为大家详细介绍了JS 点击按钮显示更多内容的简单示例，具有一定的参考价值，可以用来参考一下。
感兴趣JS 点击按钮显示更多内容的简单示例的小伙伴，下面一起跟随ph
感兴趣JS 点击按钮显示更多内容的简单示例的小伙伴，下面一起跟随ph
文章正文
这篇文章主要为大家详细介绍了JS 点击按钮显示更多内容的简单示例，具有一定的参考价值，可以用来参考一下。
感兴趣JS 点击按钮显示更多内容的简单示例的小伙伴，下面一起跟随php教程的小编罗X来看看吧。<br>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 设置1个无内容DIV ,超过高度的内容为hidden-->
<div id="test" style="width:100px;height:100px;overflow-y:hidden;">
</div>
</body>
<!-- 设置展开内容和关闭内容的按钮(原理为,点击"展开",则"展开"按钮隐藏,"关闭"按钮显示;点击"关闭",则自己关闭,"展开"按钮展开) -->
<a href="javascript:void(0)" id="show" style="display:block" onclick="document.getElementById('test').style.height='auto';document.getElementById('hidden').style.display='block';document.getElementById('show').style.display='none';">展开</a>
<a href="javascript:void(0)" id="hidden" style="display:none;" onclick="document.getElementById('test').style.height='200px';document.getElementById('hidden').style.display='none';document.getElementById('show').style.display='block';">关闭</a>
<script type="text/javascript">
/**
* @param
* @author php教程 www.idcnote.com
**/
<!-- 设置页面加载时执行 -->
window.onload=function(){
var str = "测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句";
var str1 = str.substring(0,70);
document.getElementById("test").innerText=str1;
}
</script>
</html>
注：关于JS 点击按钮显示更多内容的简单示例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
