您的位置：首页 > Web前端 > JavaScript

初识JS的魅力（3）

2017-03-10 14:52 190 查看

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 a = 'value';
var oTxt = document.getElementById('txt1');
//第一种操作属性的方式——点——一般情况下用
//oTxt.value = 'abc'
//第二种操作属性的方式——中括号——好处：中括号里面的内容可以以变量、参数的形式进行存储。
//oTxt[a] = 'abc';
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就是常量

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数 javascript 属性

相关文章推荐

新的分享

章节导航