小测试:



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

  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. JavaWeb Filter--过滤器 简介

    本文转载自:http://blog.csdn.net/wanghuan203/article/details/7325651 过滤器就是在源数据和目的数据之间起过滤作用的中间件. Web应用中,在处理 ...

  2. 查看EBS R12应用中使用CONTEXT_FILE的版本及路径

    SELECT * FROM APPLSYS.FND_OAM_CONTEXT_FILES;

  3. 浏览器检测JS代码(兼容目前各大主流浏览器)

    var BrowserMatch = { init: function () { this.browser = this.getBrowser().browser || "An Unknow ...

  4. dp状态压缩-铺砖问题

    题目:有一个n行m列的地板,需要用 1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? 示范: 解法:用F[i][j]存放第i行的第j状态(j为十进制,转为二进制即是状态)有多少种方案. 用 ...

  5. leetcode Binary Tree Inorder Traversal python

    # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...

  6. java获得平台相关的行分隔符和java路径分隔符的方法

    System.getProperties(): 行分隔符在windows 下是 \r\n,在Linux下面是 \n, 在Mac下是 \r路径分隔符在windows下是 \ ,在LInux下是 / Sy ...

  7. group_concat 使用

    Mysql中使用group_concat时,出现Row 1 was cut by GROUP_CONCAT()异常. group_concat默认的最大拼接长度,是1024. 把所有子节点的ID,用逗 ...

  8. java.util.List org.apache.struts2.components.Form.getValidators(java.lang.String) threw an exception

    在使用ajax主题时出现上述错误的解决办法是将form表单中的action属性值改为*.action后就可以解决.至于为什么会这样不太明白.但是修改action的属性值以后就会出现另一个错误即 对应的 ...

  9. Flot chart学习笔记

    背景及相关简介 在最近的BS新项目中需要用到绘图数据显示的功能.在进行充足的选择之后决定才去开源的Flot.Flot是一个jQuery绘图库.主要用于简单的绘制图表功能.具有吸引人的渲染外观和互操作的 ...

  10. Android studio libs目录

    Android studio libs目录: 关于Android studio libs目录,Android studio 已经为我们自动生成了,如果默认 是看不到默认Libs目录的,点击红色按钮地方 ...