函数传参
-
改变背景颜色
-函数传参：参数就是站位符
什么时候用传参——函数里定不下来的东西 -
改变div的任意样式
-操纵属性的第二种方式
(1) 什么时候用：要修改的属性不固定
(2) 字符串和变量——区别和关系
-将属性名作为参数传递 -
style与className
-元素.style.属性=xxx是修改行间样式
-之后再修改className不会有效果
例如，改变背景颜色：
方法一：没有函数传参的情况
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">变绿</button>
<button id="btn2">变黄</button>
<button id="btn3">变黑</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementsByTagName('button');
oBtn[0].onclick = function(){
oDiv.style.background = "green";
}
oBtn[1].onclick = function(){
oDiv.style.background = "yellow";
}
oBtn[2].onclick = function(){
oDiv.style.background = "black";
}
</script>
</body>
</html>
方法二：通过函数传参的情况
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button onclick="setColor('green')">变绿</button>
<button onclick="setColor('yellow')">变黄</button>
<button onclick="setColor('black')">变黑</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
function setColor(color){
oDiv.style.background = color;
}
</script>
</body>
</html>
操作属性的两种方法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性的方法</title>
</head>
<body>
<input id="txt1" type="text">
<button onclick="setText()">改变文字</button>
<script>
function setText(){
var oTxt = document.getElementById('txt1');
//第一种操作属性的方法，就是.点
// oTxt.value = 'aaaaa';
//第二种操作属性的方法，就是[ ],这种方式可方便传参数
oTxt['value'] = 'aaaaa';
}
</script>
</body>
</html>
div改变样式：(传递两个参数)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button onclick="setStyle('width','400px')">变宽</button>
<button onclick="setStyle('height','600px')">变高</button>
<button onclick="setStyle('background','yellow')">变黄</button>
<div id="div1">
</div>
<script>
var oDiv = document.getElementById('div1');
function setStyle(name,value){
oDiv.style[name] = value;
}
</script>
</body>
</html>
网友评论