比如仅仅改变背景的颜色

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

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

<!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. 阻止check事件冒泡

    在Datagrid中添加了checkbox,想实现的效果是: 1.点击行中任意位置,该行的复选框变为选中状态,同时该行也获得焦点: 2.点击复选框,复选框打勾,同时该行获取焦点. 要实现功能1,用到d ...

  2. 浏览器检测(BrowserDetect.js)使用

    浏览器检测是在工作中经常用到的,如果只是简单判断当前是什么浏览器的话可以通过window.navigator.useragent这样的js来直接判断就可以了! 但是针对浏览器版本要求比较高的时候,如果 ...

  3. Restful WebApi开发实践

    随笔分类 - Restful WebApi开发实践   C#对WebApi数据操作 摘要: ## 目标简化并统一程序获取WebApi对应实体数据的过程,方便对实体进行扩充.原理就是数据服务使用反射发现 ...

  4. Reactive Extensions

    Rx提供了一种新的组织和协调异步事件的方式,极大的简化了代码的编写.Rx最显著的特性是使用可观察集合(Observable Collection)来达到集成异步(composing asynchron ...

  5. Ubuntu下LaTex中文环境安装与配置

    转载自:http://www.linuxidc.com/Linux/2012-06/62456.htm LaTeX是一个强大的排版软件,但是其最初只是为英文排版而设计的.为了使其能够胜任中文排版的重任 ...

  6. ant svn

    <!-- 检出代码 这里使用 export 不是checkout 二者区别 checkout会svn相关信息文件检出,export只是检出最新的文件--> <target name= ...

  7. 加载DLL模块

    关于Windows平台下应用程序加载DLL模块的问题. 本文将讨论以下问题: (1)Windows可执行程序会从哪些目录下加载DLL. (2)如何将可执行使用的DLL放置到统一的目录下,而不是与EXE ...

  8. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  9. [转]Iphone m3u8 segmenter from ffmpeg for video streaming

    源地址:http://lukasz.cepowski.com/devlog/30,iphone-m3u8-segmenter-from-ffmpeg-for-video-streaming Recen ...

  10. 清除在Windows下访问共享文件夹时的登录信息

    清除在Windows下访问共享文件夹时的登录信息 在实际工作中,经常需要访问局域网内其他机子上的共享文件夹,例如\\192.168.1.100\d$ , 首次访问时,需要输入用户名和密码才可以进入,即 ...