比如仅仅改变背景的颜色

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

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

<!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. CSS3教程:box-sizing属性的理解border、padding与容器宽度的关系

    说到 IE 的 bug,一个臭名昭著的例子是它对于“盒模型”的错误解释:在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内.这 ...

  2. Crystal Report 在 VS 2010 中的使用和发布

    原文:Crystal Report 在 VS 2010 中的使用和发布 使用: 打开CrystalReport官网下载页 目前最新版本为13.0.4 选择“SAP Crystal Reports, v ...

  3. 常用在网站上的30个jQuery插件

    jQuery插件是网页设计师最喜欢的.从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站.在本文的在30个插件中,我认为必须在网站建设时用到.当然你现在可能不善 ...

  4. HTTP 报文中的 Header 字段进行身份验证

    [小技巧][ASP.Net MVC Hack] 使用 HTTP 报文中的 Header 字段进行身份验证 在一些 Web 系统中,身份验证是依靠硬件证书进行的:在电脑上插入 USB 证书,浏览器插件读 ...

  5. unix域套接字UDP网络编程

    unix域套接字UDP网络编程,服务器如下面: #include <stdio.h> #include <stdlib.h> #include <string.h> ...

  6. css优先级机制说明

    原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...

  7. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  8. Android中的dp，px以及wrap_content的实际展示效果

    因为一个效果中的图片设置了wrap_content的属性,但在720dp跟540dp上面显示不一致使老大非常恼火.跟他讲也讲不明白.于是乎让我们彼此测试来探个究竟.首先测试的是个图片: 它的物理像素是 ...

  9. MVVM框架avalon在兼容旧式IE

    迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...

  10. memcpy的实现

    memcpy的实现看起来貌似比较简单,但是也是有注意的地方! void *memcpy(void *dst, const void *src, size_t size) { //check argum ...