1. 函数传参的第一个小案例
没有用函数传参时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>函数传参
</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
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="toGreen()">
<input type="button" value="变黄" onclick="toYellow()">
<input type="button" value="变黑" onclick="toBlack()">
<div id="div1"></div>
</body>
</html>
使用函数传参以后
<!DOCTYPE html>
<html>
<head lang="en">
<meta 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;
}
</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>
2. 第二种操作属性的方式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第二种操作属性的方式
</title>
<script>
function setText(name) {
var oTxt = document.getElementById('txt1');
oTxt[name] = 'abc';
}
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input type="button" value="改变文字" onclick="setText('value')"/>
</body>
</html>
3. 函数传参的第二个小案例：
当修改的属性不固定的时候，函数传参用中括号。
没有使用传参前
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div改变样式
</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
function toWidth(){
var Owidth = document.getElementById('div1');
Owidth.style.width = '400px';
}
function toHeight(){
var Oheight = document.getElementById('div1');
Oheight.style.height = '100px';
}
function toBackground(){
var Obackground = document.getElementById('div1');
Obackground.style.background= 'green';
}
</script>
</head>
<body>
<input type="button" value = "变宽" onclick="toWidth()"/>
<input type="button" value = "变高" onclick="toHeight()"/>
<input type="button" value = "变背景" onclick="toBackground()"/>
<div id="div1"></div>
</body>
</html>
使用传参以后
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div改变样式
</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>
4. 变量和字符串之间的区别
alert（a）:这里的a就是变量 alert（’a’）:这里的a就是常量
转载请注明原文地址: https://ju.6miu.com/read-21325.html
