小测试:



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

  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. C# 创建数组的几种方法

    第一种 string[] myArray=new string[10]; 第二种 string[] myArray={"1","2"}; 第三种 string[ ...

  2. -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory

    刚刚学习SHELL 写了一个简单的例子发生如下错误 -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory ...

  3. php中禁止非法调用和硬路径引入文件的方法

    php中禁止非法调用和硬路径引入文件的方法 在php中有一些公共的文件为了方便,我们会做一个公共文件,让不用的文件共同调用.为了禁止公共文件被非常单独调用,可以在文件上做一个常量,禁止非常调用:在公共 ...

  4. zendstudio -chinese

    http://archive.eclipse.org/technology/babel/index.php http://www.eclipse.org/babel/downloads.php 注册码 ...

  5. 向mysql添加新用户并分配权限

    首先要声明一点,大部分情况下,修改MySQL是需要有mysql里的root权限的,所以一般用户无法更改密码,除非请求管理员. 方法一使用phpmyadmin,这是最简单的了,修改mysql库的user ...

  6. 数字证书管理工具keytool常用命令介绍

    需要给一个apk加签名,用到了keytool这个工具,下面转载一篇介绍keytool的文章 http://blog.chinaunix.net/uid-17102734-id-2830223.html ...

  7. visual studio 配置OpenGL环境

    首先在网上下载一个GLUT工具包. glut.zip,大约一百多kb. 解压之后得到这么几个文件: 将glut.h复制到C:\Program Files (x86)\Microsoft Visual ...

  8. surface 其实是UEFI与BIOS并存，借用官网的进入方法（少有更改）

    surface 其实是UEFI与BIOS并存,借用官网的进入方法(少有更改) 第一种: 1.       Swipe in from the right edge of the screen, and ...

  9. svn 同步到web目录

    windows  hook 下 @echo offSET REPOS=%1SET REV=%2SET DIR=%REPOS%/hooksSET PATH=%PATH%;SET WORKING=D:/w ...

  10. [问题解决] "Nautilus could not create the required folder "/home/kenneth/.config/nautilus"

    错误: "Nautilus could not create the required folder "/home/kenneth/.config/nautilus" 发 ...