比如仅仅改变背景的颜色

　　函数传参：参数就是占位符。

　　那么在什么时候用传参呢？函数里定不下来的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #div1{
        width:200px;
        height:200px;
        background:red;
        }
</style>
<script>
    function setColor(color)
    {
        var oDiv=document.getElementById('div1');
        oDiv.style.background=color;
        }
    /*function toGreen()
    {
        var oDiv=document.getElementById('div1');
        oDiv.style.background='green';
        }
    function toYellow()
    {
        var oDiv=document.getElementById('div1');
        oDiv.style.background='yellow';
        }
    function toBlack()
    {
        var oDiv=document.getElementById('div1');
        oDiv.style.background='black';
        }*/        
</script>
</head>

<body>
    <input type="button" value="变绿" onclick="setColor('green')"/>
    <input type="button" value="变黄" onclick="setColor('yellow')"/>
    <input type="button" value="变黑" onclick="setColor('black')"/>
    <div id="div1">
    </div>
</body>
</html>

比如改变Div的任意样式

　　操纵属性的第二种方式

　　那么在什么时候用呢？要修改的属性不固定。比如又要改宽度，又要改高度，又要改背景颜色，需要改的属性和其对应的值都不确定的时候。

　　字符串和变量——区别和关系

　　因此可以将属性名作为参数传递。

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1
{
    width:200px;
    height:200px;
    background:red;
    }
</style>
<script>
function setStyle(name,value)
{
    var oDiv=document.getElementById('div1');
    oDiv.style[name]=value;
    }
</script>
</head>

<body>
<input type="button" value="变宽" onclick="setStyle('width','400px')"/>
<input type="button" value="变高" onclick="setStyle('height','400px')"/>
<input type="button" value="变绿" onclick="setStyle('background','green')"/>
<div id="div1">
</div>
</body>
</html>

　　字符串和变量——区别和关系

　　变量里面的值是可以改变的。

　　比如var a=5;alert(a);那么浏览器弹出来的就是5。如果a=12，那么浏览器弹出来的就是12。

　　而字符串的值是固定的。比如alert('abc');那么浏览器弹出来的就是abc。

　　CSS里面还有一种东西叫做字面量（常量），就是说你看到这个东西，自然就知道这个代表什么。比如12，就是数字12；比如'abc'，就是字母abc。

　　与字面量相对的就是变量。比如var a，a中的值是不固定的，仅仅只看a根本不知道a代表什么值。

　　因此写字符串时必须加''单引号，如果不加就会被认为是变量或者参数。

style与className

　　元素.style.属性=xxx 是修改行间样式

　　之后再修改className不会有效果。

　　因此，对于同一个元素，比如<div>,<span>，要么从头到尾操作的都是它的class，要么从头到尾只操作它的style，不要混着来。

【JS学习笔记】函数传参的更多相关文章

  1. js学习笔记5----函数传参

    构建函数的原则: 1) 尽量保持HTML结构一致: 2) 把核心主程序实现,用函数包起来: 3) 把每组里不同的值找出来,通过传参实现.

  2. JS中的函数传参

    前言: 函数分为有参有返回值,有参无返回值,无参无返回值,无参有返回值:那么对于无参数的函数你想使用函数的调用怎么办呢?如果你想封装一个代码,实现多种功能,但是形参大于实参或者实参大于形参又该如何?本 ...

  3. 看似无参却有参-----JS中的函数传参

    事件event JS的事件event是一个非常大的对象,不管是什么事件,事件的详情都会绑定到全局变量event中.这样做之所以安全,就是因为JS是单线程的. <html> <body ...

  4. js 变量以及函数传参

    一.变量: 基本类型是变量对象重新创建一个新值给变量对象空间,虽然是同一个值但是互不影响. 引用类型是也是将一个值重新赋值给新的变量空间,但是这个值是堆中对象的一个指针,新的变量和旧的变量指向是同一个 ...

  5. c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参

    c# 通用类型系统 及变量在 深拷贝 浅拷贝 函数传参 中的深层次的表现 在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...

  6. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  9. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

随机推荐

  1. WebIM(4)----Comet的特殊之处

    WebIM系列文章 在一步一步打造WebIM(1)一文中已经使用Comet实现了一个简单的WebIM,那么,Comet究竟和一般的打开网页有何区别,本文将通过编写一个简单的HTTP服务器来说明两者的区 ...

  2. Python 3语法小记（九） 异常 Exception

    常见异常: Exception                        所有异常的基类 AttributeError                 特性应用或赋值失败时引发 IOError  ...

  3. C# WinForm程序退出的方法（转）

    转自:http://www.cnblogs.com/yugen/archive/2010/08/10/1796864.html 1.this.Close();   只是关闭当前窗口,若不是主窗体的话, ...

  4. 转载：21个免费的UI界面设计工具、资源及网站

    我们刚刚介绍了移动设计初探:触屏网页设计.本文将介绍一些UI界面与设计使用的元素.软件和网站.内容很丰富,适合用户体验设计师.界面设计师.产品设计师.JS前段开发.手机产品设计以及iPad和平板电脑产 ...

  5. QTP中DataTable操作大全

    序曲 假设现在有一个Excel文件:D:\data.xls,里面的具体内容如下:有两个Sheet,第一个叫Login,第二个叫InsertOrder: 当前QTP的Test中有两个Action:Log ...

  6. Ajax+Ashx实现以及封装成控件的实现

    asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现) 工作好长时间了,这期间许多功能也写成了不少的控件来使用,但是,都只是为了代码的结构清析一些而已.而这 ...

  7. [转]iOS Anti-Debugging Protections

    source-1: http://www.coredump.gr/articles/ios-anti-debugging-protections-part-1/ source-2: http://ww ...

  8. javascript闭包1

    javascript闭包 在学习javascript闭包之前,需要先了解一下"作用域链". 每一段javascript代码都有一个与之关联的作用域链(scope chain),这个 ...

  9. DataSet,DataTable,XML格式互转

    //// <summary> /// 将DataTable对象转换成XML字符串 /// </summary> /// <param name="dt" ...

  10. MongoDB学习之--安全和认证

    MongoDB学习之--安全和认证 本文主要介绍两部分内容,Mongodb的安全检查配置以及安全认证操作: 虽然确保系统安全是系统管理员的重要工作,但是作为程序员了解其机制也是大有好处的,毕竟不是每个 ...