比如仅仅改变背景的颜色

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

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

<!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. leetcode[61] Unique Paths

    题目:给定一个m*n的矩阵,从头开始,只能往右边和下边走,一次走一格,知道走到最后一个(右下角)为止.总共有多少种走法. 典型的动态规划吧.其实从头走到尾部,和从尾部开始走到头是一样的次数.我们用一个 ...

  2. ubuntu14.04无法播放更新后完善的解决方案

    -------------------------------------- 前几天的ubuntu升级14.04该,(Kubuntu版本)时间去更新一下系统..结果没有声音了,网络视频也看不了了.百度 ...

  3. 批处理中set截取字符具体解释

    set截取字符具体解释  在批处理中,set的功能有点繁杂:设置变量.显示环境变量的名及值.做算术运算.等待用户的输入.字符串截取.替换字符串,是我们经常使用的命令之中的一个. 在字符串截取方面,新手 ...

  4. 安装Windows2012操作系统 - 初学者系列 - 学习者系列文章

    Windows 2012是微软最新的服务器操作系统,估计在国外服务器空间的运营商安装的比较多些吧.下面简要介绍下该操作系统的安装. 1.  将光盘放入光驱.进入BIOS设置成光驱启动.重启计算机. 2 ...

  5. 基于EF+WCF的通用三层架构及解析

    分享基于EF+WCF的通用三层架构及解析 本项目结合EF 4.3及WCF实现了经典三层架构,各层面向接口,WCF实现SOA,Repository封装调用,在此基础上实现了WCFContext,动态服务 ...

  6. Object.prototype.propertyIsEnumerable

    语法: obj.propertyIsEnumerable(prop); 此方法返回一个布尔值,表明指定的属性名是否是当前对象可枚举的自身属性. 1.如果是用户自定义了对象的属性,将返回true,比如 ...

  7. ref引用类型，数组型参数,out输出参数

    ref和out的相同点和不同点 共同点:都是引用传递不同点:ref的参数在调用之前一定要赋值,在方法调用的过程中可以不要赋值.    out的参数在调用之前可以不赋值,在方法调用的过程中一定要赋值. ...

  8. Javascript多线程引擎(六)

    Javascript多线程引擎(六) 经过三个月的时间, Javascript 引擎已经完成beta版本(还不支持多线程特性, 预计下个星期就可以支持了, 现阶段还在进行测试基本JS单元功能), 并且 ...

  9. C#函数式程序设计之泛型

    Intellij修改archetype Plugin配置 2014-03-16 09:26 by 破狼, 204 阅读, 0 评论,收藏, 编辑 Maven archetype plugin为我们提供 ...

  10. [RM 状态机详解1] RMApp状态机详解

    概述 Apache Hadoop 2.0在Hadoop 1.0基础上做了许多的重构工作,代码上的重构最大的变化在于引入状态机处理各个角色的状态与变迁,使用状态机是得代码结构更加清晰,方便异步处理各种操 ...