比如仅仅改变背景的颜色
函数传参:参数就是占位符。
那么在什么时候用传参呢?函数里定不下来的东西。
<!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,不要混着来。