【JS学习笔记】函数传参

时间:2023-10-11 11:37:14

比如仅仅改变背景的颜色

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

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

<!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,不要混着来。