显示和隐藏(display属性)none或block
2024-08-29 11:19:15
显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。
语法:
Object.style.display = value
注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。
value取值:
看看下面代码:
任务
我们来实现id="con"的p标签元素的隐藏和显示:
1. 在右边编辑第10行补充代码,通过style.display实现隐藏。
2. 在右边编辑第15行补充代码,通过style.display实现显示。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con").style.display="none"; }
function showtext()
{
var mychar = document.getElementById("con").style.display="block"; }
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
最新文章
- zTree Jquery eCharts
- javaweb中实现在线人数统计
- Errors
- Android之“Unfortunately,xxx has stopped!”
- jdk 中Runtime之单例模式 学习
- SmartFoxServer 2x的pythonclient
- struts 学习之问一
- mysql vachar
- CF 604C Alternative Thinking#贪心
- monkeyscript - 定制化monkey流程
- 201521123119《Java程序设计》第4周学习总结
- babel7-按需加载polyfill
- Docker系列05—Docker 存储卷详解
- DotNetCore深入了解之一Startup类
- c#无边框窗体移动
- How to execute a Stored Procedure with Entity Framework Code First
- 《DSP using MATLAB》Problem 7.12
- Python内置类型(4)--数值
- kettle学习笔记——插件的安装与使用
- 简谈高通Trustzone的实现【转】
热门文章
- NOIp2018集训test-9-15(联考二day1)
- (干货)java中如何根据一个时间获取属于本年那一周,本周的开始时间以及最后一天时间。并且设置起始时间为周6.结束时间为周5
- Openstack Nova 源码分析 — RPC 远程调用过程
- Tomacat7启动报错-org.apache.catalina.deploy.WebXml addFilter
- Markdown文档常用字体及颜色设置
- C 终端输入 字符123 输出 10进制123
- 关于python merge后数据行数增加的问题
- 火狐浏览器缓存导致JS已经改变的ID没改变
- CSS在工程中改变之面向对象的 CSS
- JedisCluster获取key所在的节点