小测试:



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

  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. js实现弹出窗口、页面变成灰色并不可操作的例子

    function show() //显示隐藏层和弹出层 { var hideobj=document.getElementById("hidebg"); hidebg.style. ...

  2. Xcode常用快捷键 (转载)

    Xcode快捷键,工欲善其事,必先利其器.mac的键盘和ms的还是有些不一样,得适应一下下. 新建项目 command+shift+n 新建文件 command+n 新建空文件 command+con ...

  3. C# DataTable 详解

    添加引用 using System.Data; 创建表 //创建一个空表 DataTable dt = new DataTable(); //创建一个名为"Table_New"的空 ...

  4. Python核心编程读笔 9： 异常

    第10章 异常一.异常1 检测和处理异常 (1)try-except语句 try: try_suite #监控这里的异常 except Exception[, reason]: except_suit ...

  5. Android 利用剪切板(clipboardManager )实现数据传递

    首先是系统剪切板的调用服务: ClipboardManager ClipboardManager=getSystemService(Context.CLIPBOARD_SERVICE); 然后是写入, ...

  6. English words

    英语指路常用单词 the one-way street单行道traffic light红绿灯 fork road三叉路口intersection/crossroad 十字路口T road 丁字路口in ...

  7. [原创]使用GCC创建 Windows NT 下的内核DLL

    原文链接:使用GCC创建 Windows NT 下的内核DLL 在温习<<Windows 2000 Driving>>分层驱动程序一章的时候,看到了关于紧耦合驱动连接方式,这种 ...

  8. tail -f

    http://stackoverflow.com/questions/187587/looking-for-a-windows-equivalent-of-the-unix-tail-command ...

  9. windows 8 metro 开发学习资源链接

    原文 http://www.cnblogs.com/icuit/archive/2012/05/30/2525979.html windows8 metro开发资源目前还是以MSDN为主,做了一个li ...

  10. 20140613_JavaWeb学习之开发环境配置篇

    本文所使用软件百度云盘网址:http://pan.baidu.com/s/1kTDRFwz 1安装JDK 操作系统:windows7-64bit 版本号:jdk-7u51-windows-x64 安装 ...