小测试:



注意:取消所有的设定可以直接使用

  1. document.getElementById("txt").removeAttribute("style");
这个是个神奇的东西.

  1. <!DOCTYPE HTML>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    5. 

  5. <title>javascript</title>
    6. 

  6. <style type="text/css">
    7. 

  7. body{font-size:12px;}
    8. 

  8. #txt{
    9. 

  9.     height:400px;
    10. 

  10.     width:600px;
    11. 

  11. 	border:#333 solid 1px;
    12. 

  12. 	padding:5px;}
    13. 

  13. p{
    14. 

  14. 	line-height:18px;
    15. 

  15. 	text-indent:2em;}
    16. 

  16. </style>
    17. 

  17. </head>
    18. 

  18. <body>
    19. 

  19.   <h2 id="con">JavaScript课程</H2>
    20. 

  20.   <div id="txt"> 
    21. 

  21.      <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
    22. 

  22.         <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
    23. 

  23.         <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
    24. 

  24.         <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
    25. 

  25.   </div>
    26. 

  26.   <form>
    27. 

  27.   <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    28. 

  28.     <input type="button" value="改变颜色" onclick="cgcolor()" />
    29. 

  29.     <input type="button" value="改变宽高" onclick="cgwh()" />
    30. 

  30.     <input type="button" value="隐藏内容" onclick="hidetext()">
    31. 

  31.     <input type="button" value="显示内容" onclick="showtext()">
    32. 

  32.     <input type="button" value="取消设置" onclick="noconfig()">
    33. 

  33.   </form>
    34. 

  34.   <script type="text/javascript">
    35. 

  35. //定义"改变颜色"的函数
    36. 

  36.     function cgcolor(){
    37. 

  37.         var mychar = document.getElementById("txt");
    38. 

  38.         mychar.style.color="orange";
    39. 

  39.         mychar.style.backgroundColor="#ccc";
    40. 

  40.     }
    41. 

    42. 

  42. //定义"改变宽高"的函数
    43. 

  43.     function cgwh(){
    44. 

  44.         var mychar = document.getElementById("txt");
    45. 

  45.         mychar.style.width="800px";
    46. 

  46.         mychar.style.height="200px";
    47. 

  47.     }
    48. 

    49. 

  49. //定义"隐藏内容"的函数
    50. 

  50.     function hidetext(){
    51. 

  51.         var mychar = document.getElementById("txt");
    52. 

  52.         mychar.style.display="none";
    53. 

  53.     }
    54. 

    55. 

  55. //定义"显示内容"的函数
    56. 

  56.     function showtext(){
    57. 

  57.         var mychar=document.getElementById("txt");
    58. 

  58.         mychar.style.display="block";
    59. 

    60. 

  60.     }
    61. 

    62. 

  62. //定义"取消设置"的函数
    63. 

  63.     function noconfig(){
    64. 

  64.         var mychar =confirm("取消上面的设定?")
    65. 

  65.         if(mychar==true){
    66. 

  66.             document.getElementById("txt").removeAttribute("style");
    67. 

  67.         }
    68. 

  68.         else{
    69. 

  69.             //do nothing
    70. 

  70.         }
    71. 

  71.     }
    72. 

    73. 

    74. 

  74.   </script>
    75. 

  75. </body>
    76. 

  76. </html>

JS笔记 入门第四的更多相关文章

  1. JS笔记 入门第三

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树) 把上面的代码进行分 ...

  2. TYUT程序设计入门第四讲练习题题解--数论入门

    程序设计入门第四讲练习题题解--数论入门 对于新知识点的学习,需要不断地刷题训练,才能有所收获,才能更好地消化知识点. 题组链接: 程序设计入门第四讲练习题--数论 by vjudge 题解: A. ...

  3. JavaMail入门第四篇 接收邮件

    上一篇JavaMail入门第三篇 发送邮件中,我们学会了如何用JavaMail API提供的Transport类发送邮件,同样,JavaMail API中也提供了一些专门的类来对邮件的接收进行相关的操 ...

  4. Kotlin入门第四课：简单工厂模式

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  5. Android JNI入门第四篇——Android.mk文件分析

    ndroid.mk文件是在使用NDK编译C代码时必须的文件,Android.mk文件中描述了哪些C文件将被编译且指明了如何编译.掌握Android.mk文件的编写主要是掌握其里头将要使用的一些关键字, ...

  6. CTF---Web入门第四题 Forms

    Forms分值:10 来源: Ph0enix 难度:易 参与人数:4945人 Get Flag:2776人 答题人数:2824人 解题通过率:98% 似乎有人觉得PIN码是不可破解的,让我们证明他是错 ...

  7. CTF---密码学入门第四题 困在栅栏里的凯撒

    困在栅栏里的凯撒分值:10 来源: 北邮天枢战队 难度:易 参与人数:4531人 Get Flag:2124人 答题人数:2285人 解题通过率:93% 小白发现了一段很6的字符:NlEyQd{sef ...

  8. Linux零基础入门第四课

    根据直播讲义整理的内容,从第四课开始.前三课的内容若后面有精力会一并整理进来. 文件的基本操作(上) 创建.删除.复制.移动和重命名 touch命令创建文件 语法 >$ touch file0 ...

  9. 大数据入门第四天——基础部分之轻量级RPC框架的开发

    一.概述 .掌握RPC原理 .掌握nio操作 .掌握netty简单的api .掌握自定义RPC框架 主要内容 1.RPC是什么 RPC(Remote Procedure Call)—远程过程调用,它是 ...

随机推荐

  1. CentOS6.4下搭建hadoop2.2（64bit）注意事项

    注:本文针对64位机器,32bit课直接tar -zxvf hadoop-2.2.0.tar.gz 解压配置即可. Step1:安装jdk(6以上版本) Step2:下载hadoop--->ht ...

  2. Git 系列（四）：在 Git 中进行版本回退

    在这篇文章中,你将学到如何查看项目中的历史版本,如何进行版本回退,以及如何创建 Git 分支以便你可以大胆尝试而不会出现问题. 在你的 Git 项目的历史中,你的位置就像是摇滚专辑中的一个片段,由一个 ...

  3. JavaScript瀑布流代码

    function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt( ...

  4. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  5. php传参方式1--ajax

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...

  6. python模块—urllib

    1. 网页操作 urllib.urlopen(url[,data[,proxies]]) 打开一个url,返回一个文件对象,然后可以进行类似文件对象操作 url:远程数据的路径,即网址 data:表示 ...

  7. Eclipse Rcp

    http://blog.csdn.net/soszou/article/details/7996748

  8. image.xx.com 通过haproxy 跳转到内部图片服务器

    <pre name="code" class="html">http://www.hyyche.com/#main C:\Users\Adminis ...

  9. docker 容器开启ssh服务

    ssh服务安装 安装ssh服务 #yum install openssh-server -y 安装passwd(修改密码需要) #yum install passwd -y 修改sshd_config ...

  10. Group Commit of Binary Log

    160222 09:19:26 mysqld_safe Starting mysqld daemon with databases from /data01/mysql 2016-02-22 09:1 ...