1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
  4. <title>javascript</title>
  5. <style type="text/css">
  6. body{font-size:12px;}
  7. #txt{
  8.     height:400px;
  9.     width:600px;
  10.     border:#333 solid 1px;
  11.     padding:5px;}
  12. p{
  13.     line-height:18px;
  14.     text-indent:2em;}
  15. </style>
  16. </head>
  17. <body>
  18.   <h2 id="con">JavaScript课程</H2>
  19.   <div id="txt">
  20.      <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
  21.         <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
  22.         <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
  23.         <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  24.   </div>
  25.   <form>
  26.   <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
  27.      <input type="button" value="改变颜色" onclick="changeColor()" />
  28.     <input type="button" value="改变宽高" onclick="changeHeight()" />
  29.     <input type="button" value="隐藏内容" onclick="hiddenDiplay()" />
  30.     <input type="button" value="显示内容" onclick="display()" />
  31.     <input type="button" value="取消设置" onclick="reset()" />
  32.   </form>
  33.   <script type="text/javascript">
  34. //定义"改变颜色"的函数
  35.     function changeColor(){
  36.         var element = document.getElementById("txt");
  37.         element.style.color = "green";
  38.         element.style.backgroundColor = "blue";
  39.     }
  40.  
  41. //定义"改变宽高"的函数
  42.     function changeHeight(){
  43.         var element = document.getElementById("txt");
  44.         element.style.height = "200px";
  45.         element.style.width = "400px";
  46.     }
  47.  
  48. //定义"隐藏内容"的函数
  49.   function hiddenDiplay(){
  50.         var element = document.getElementById("txt");
  51.         element.style.display = "none";
  52.     }
  53.  
  54. //定义"显示内容"的函数
  55.  function display(){
  56.         var element = document.getElementById("txt");
  57.         element.style.display = "block";
  58.     }
  59.  
  60. //定义"取消设置"的函数
  61. function reset(){
  62.   var con = confirm("是否要取消设置？");
  63.   if(con ==true){
  64.         var element = document.getElementById("txt");
  65.         element.style.color = "black";
  66.         element.style.backgroundColor = "white";
  67.         element.style.height = "400px";
  68.         element.style.width = "600px";
  69.         element.style.display = "block";
  70.   }
  71.   }
  72.  
  73.   </script>
  74. </body>
  75. </html>

执行到 reset()，会发现函数根本就没有调用，

将reset改成另一个functionName即可，如resetDisplay();

【web开发--js学习】functionName 如果是一个属性值，函数将不会被调用的更多相关文章

  1. 现代web开发需要学习的15大技术

    现代Web开发需要学习的15大技术 2016-06-08 13:08 快进到现在,我发现现代web开发再一次将发生压倒性的改变.信息资讯的铺天盖地令人迷惑,尤其对于初学者而言.首要原因是新的框架,例如 ...

  2. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  3. 判断js对象是否拥有某一个属性的js代码

    js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var ...

  4. js sort方法根据数组中对象的某一个属性值进行排序（实用方法）

    js sort方法根据数组中对象的某一个属性值进行排序 sort方法接收一个函数作为参数,这里嵌套一层函数用来接收对象属性名,其他部分代码与正常使用sort方法相同. var arr = [ {nam ...

  5. js中attr 与find 获取属性值，

    一.attr的用法 1. attr(属性名)        //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 und ...

  6. Mysql JSON字段提取某一个属性值的函数

    mysql从5.7开始才支持JSON_EXTRACT等 JSON相关的函数, 项目里用到的mysql是5.6的,需要提取JSON字段里某一个属性值进行统计, 自己写了一个笨的提取方法: CREATE ...

  7. js对象数组中的某属性值 拼接成字符串

    js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...

  8. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  9. 《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记（转）

    学习地址为: http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5   1.建立应用程序 ...

随机推荐

  1. django Model模型二及Model模型对数据库的操作

    在django模型中负责与数据库交互的为Model层,Model层提供了一个基于orm的交互框架 一:创建一个最基本的Model from __future__ import unicode_lite ...

  2. TransactionScrope 2

    继上一篇文章TransactionScrope 在做相应的变动时,发现可以重现ORA-14450错误,如: List<Thread> ls = new List<Thread> ...

  3. C# 十进制和十六进制转换

    转至:http://www.cnblogs.com/fwind/archive/2012/04/13/2445380.html 在C#中,十进制和十六进制转换非常简单,方法如下: 十进制转为十六进制: ...

  4. pp to write

    vanishing gradient problem multi-dimensional lstm

  5. 从汇编看c++中的placement operator new

    placement operator new是重载的operator new运算符,它允许我们将对象放到一个指定的内存中.下面来看c++源码: class X { private: int _x; p ...

  6. Hadoop常见异常及其解决方案

    1.Shell$ExitCodeException 现象:运行hadoop job时出现如下异常: 14/07/09 14:42:50 INFO mapreduce.Job: Task Id : at ...

  7. javascript写的新闻滚动代码

    在企业站中,我们会看到很多新闻列表很平滑的滚动,但是这种功能自己写太浪费时间,下面是我整理好的一组很常用的新闻列表滚动,有上下分页哦! 1.body里面 <div class="tz_ ...

  8. 创建兼容的XHR对象

    function createXHR () {//创建XMLHttpRequest对象 var xhr=null; if(window.XMLHttpRequest){ createXHR=creat ...

  9. XML为数据库进行增删改查（实例）

    //增删改查文件 package xml2; import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.Fi ...

  10. commons-logging 和 log4j 之间的关系

    我们在做项目时,日志的记录是必不可少的一项任务,而我们通常是使用 apache 的 log4j 日志管理工具.然而,在项目中,我们经常会看到两个 jar 包:commons-logging.jar 和 ...