小测试:



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

  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. 无法加载协定为“XXXWebServiceSoap”的终结点配置部分，因为找到了该协定的多个终结点配置

    错误描述:无法加载协定为“XXXWebServiceSoap”的终结点配置部分,因为找到了该协定的多个终结点配置.请按名称指示首选的终结点配置部分. 错误原因:该webservce在web.confi ...

  2. trim()函数IE7/8不兼容

    js中重写trim()函数 <script type="text/javascript">     String.prototype.trim = function() ...

  3. SQL初级阶段笔记

    DataBase Management Stystem(数据库管理系统)简称:DBSM:虽然DBSM并不等于数据库,但行业内通常将DBSM称为数据库,所以一般来说数据库就指的是DBSM. 简单来讲DB ...

  4. api(一) 创建窗口 (转)

    所有的Windows SDK编程都有一个类似的框架,本文就说说这个框架,Windows程序设计的框架分为“三部曲”: 一.注册窗口类 注册窗口类的API函数是RegisterClass或者Regist ...

  5. 简单的BFS学习笔记

    什么是BFS传送门. 今天学习BFS,加油! 先定义个数组: struct Node{ int a=0; int b=0; int step=0; }; int map[5][4]={//地图 0,0 ...

  6. BZOJ 2878: [Noi2012]迷失游乐园( 树形dp )

    一棵树的话直接树形dp(求出往下走和往上走的期望长度). 假如是环套树, 环上的每棵树自己做一遍树形dp, 然后暴力枚举(环上的点<=20)环上每个点跑经过环上的路径就OK了. -------- ...

  7. leetcode Linked List Cycle II python

    # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...

  8. PHP EOF(heredoc)的使用

    <?php /* Heredoc技术,在PHP手册和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术. 目前一些论坛程序和CMS系统使用了这种技术,前不久看一个朋友的P ...

  9. Asp.net MVC学习

    一.mvc项目的创建并运行 1.启动vs2010 2.新建项目 3.选择Asp.net mvc应用程序 4.不创建测试用例 5.创建之后的效果 6.运行后的mvc程序

  10. Linux----给一个普通用户root权限

    问题说明:linux可以通过useradd创建用户.那有没有想过.我们创建的用户怎么样才可以使它得到全部的root权限呢? 解决办法: 1.这是一个可以打80分的办法.就是编辑/etc/sudoers ...