原生JS实现点击按钮显示更多内容
<!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" οnclick="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;" οnclick="document.getElementById('test').style.height='200px';document.getElementById('hidden').style.display='none';document.getElementById('show').style.display='block';">关闭</a>
<script type="text/javascript">
<!-- 设置页面加载时执行 -->
window.οnlοad=function(){
var str = "测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句";
var str1 = str.substring(0,70);
document.getElementById("test").innerText=str1;
}
</script>
</html>
原生JS实现点击按钮显示更多内容相关推荐
- 原生js实现点击按钮显示/隐藏图片
目录结构: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- php按钮如何加显示不出来,javascript - 点击按钮 显示更多,自定义变量显示不出来?...
点击按钮 显示更多,自定义变量显示不出来? 提示错误信息:. 想要达到的效果: 点击按键一次更多,多显示3条信息 显示更多 支持 小明1这是我的个性签名 288个赞同 本回答分成[旅游版]和[日常版] ...
- 原生js实现点击按钮切换全屏!
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
- js脚本点击按钮显示文字_JSBOX脚本聊天神器
聊天神器是一个基于JSBox的脚本 JSBox 是一个可以用来运行 JavaScript 脚本的 iOS 应用,你可以通过他来执行标准的 JavaScript 脚本 这种执行不是指跑在浏览器上,而是执 ...
- 使用原生js实现点击按钮展示不同状态内容
话不多说直接上预览图和代码吧,图片可以自己找一些素材贴上去就行了 <!doctype html> <html> <head> <meta charset=&q ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
- 点击按钮显示谷歌地图
原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...
- 网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
最新文章
- 【测试】更新红外遥控信号读取,用示波器抓取红外遥控器NEC信号
- hihocoder 1343 : Stable Members【拓扑排序】
- eclipse中的WEB项目打包部署到tomcat .
- MongoDB小型文档型数据库使用
- date字段 http 头文件_http头文件信息
- SAP License:SAP MM物料管理
- slitaz c语言开发环境,makefile和cmake的简单使用
- Java中使用各种方式实现网页跳转
- 疑似SSD掉盘:自动重启;进BIOS看不到SSD;断电重启才能看到
- tomcat/redis/dubbo/netty
- 无延时/无延迟视频直播实例效果案例
- Vue2.X 计算属性
- 未转变者服务器组队教程,未转变者怎么创建联机服务器及创建方法介绍
- C:编译错误:error: array subscript is not an integer
- oppo问答系统技术路线
- 东师《构成设计基础》离线作业
- 账号共享风险大 恐泄漏用户信息
- linux传奇私服文件包,传奇私服目录文件结构
- 使用OAuth保护REST API并使用简单的Angular客户端
- 同一局域网下两台PC之间大文件传输
热门文章
- 密码学之背包加密系统(Merkle–Hellman公钥加密算法)原理
- 设置div的内容及子标签向右对齐
- PHP+MySQL实现简单的登录注册
- iTunes Connect 上架 -- App store 搜索不到 解决方法
- 【XBL 无法开机问题】【工位机调试】sdm660 XBL阶段,绕过电池在位检测,强制启动
- 网易云课堂Web安全工程师课程分享——第二章 Web开发基础知识
- 使用VS Code通过Markdown语法快速画流程图时序图等
- 胶质瘤新发现丨神经胶质瘤标志物研究
- 如何找到winRE.wim (Win10无法重置电脑找 不到恢复环境,需要重装介质)
- 供应链管理最重要的竟然是它