<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2、函数传参</title>
<link href="base.css">
<style>
li{
padding-bottom: 50px;
}
.l{
border: 1px solid #ccc;
width:1200px;
height:60px;
}
.lll{
background-color: red;
width:800px;
height:120px;
}
</style>
</head>
<body>
<ol>
<!--1、函数传参，一个参数 -->
<div id="bianse">
<li>函数传参，一个参数
<input type="button" value="背景变黄" onclick="change('yellow')">
<input type="button" value="背景变红" onclick="change('red')">
<input type="button" value="背景变黑" onclick="change('black')">
<input type="button" value="恢复原样" onclick="change('white')">
<p>定义函数的参数为color，变量adiv的样式调用参数color，onclick事件把背景颜色的值传给参数color。</p>
</li>
</div>
<!--2、函数传参，两个参数-->
<div id="bianhua" style="margin-bottom: 50px;height: 100px;width: 1200px;border: 1px solid #ccc">
<li>函数传参，两个参数
<input type="button" value="背景变窄" onclick="change1('width','600px')">
<input type="button" value="背景变黄" onclick="change1('backgroundColor','yellow')">
<input type="button" value="背景变高" onclick="change1('height','200px')">
<input type="button" value="恢复原样" onclick="alert('sorry,我还没学')">
<p>定义函数的参数为name和value，变量bdiv的样式的属性名用参数name代替，属性值用参数value代替，onclick事件把样式的属性名和值分别传给参数name和value。</p>
</li>
</div>
<!--3、函数传参，参数加变量-->
<div>
<li>函数传参，参数加变量
<input type="text" value="你拍一 我拍一" id="bwenzi">
<input type="button" value="改变文字" onclick="change11('两个小孩儿坐灰机')">
<input type="button" value="添加title属性">
<p>定义函数的参数为name，定义变量a为参数name，两个onclick事件分别绑定标签属性调用参数的值。(暂时不知道为什么要把参数定义成变量，但是这样也行的通。)</p>
</li>
</div>
<!--4、修改样式，通过调取className-->
<div id="ll" class="l">
<li>修改样式，通过调取className
<input type="button" value="变红 变高 变窄" onclick="bian()">
<input type="button" value="恢复原样" onclick="alert('sorry,我还没学')">
</li>
</div>
</ol>
<script>
/*1、函数传参，一个参数*/
function change(color) {
var adiv=document.getElementById("bianse");
adiv.style.backgroundColor=color;
}
/*1、函数传参，一个参数end*/
/*2、函数传参，两个参数*/
function change1(name,value) {
var bdiv=document.getElementById("bianhua");
console.log(bdiv.style);
bdiv.style[name]=value;
}
/*2、函数传参，两个参数end*/
/*3、函数传参，参数加变量*/
function change11(name) {
var a=document.getElementById("bwenzi");
a.value=name;
}
/*3、函数传参，参数加变量end*/
/*4、修改样式，通过调取className*/
function bian() {
var a=document.getElementById("ll").className="lll";
}
/*4、修改样式，通过调取className end*/
</script>
</body>
</html>
浙公网安备 33010602011771号