学的JavaScript内容在进一步加深。
1.函数传参，在一定程度上可以简化代码量。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数传参数</title>
</head>
<style>
#div1{
height:100px;
width:100px;
border:1px solid #933;
display:block;}
</style>
<script>
function setColor(color){
var co=document.getElementById('div1');
co.style.background=color;
}
</script>
<body>
<input type="button" value="red" onclick="setColor('red')"/>
<input type="button" value="green" onclick="setColor('green')"/>
<input type="button" value="black" onclick="setColor('black')"/>
<div id="div1"></div>
</body>
</html>2.传参不仅传属性值，有时候还需要传属性
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
height:100px;
width:100px;
border:1px solid #933;
display:block;}
</style>
<script>
function setC(name,size){
var di=document.getElementById('div1');
//第一种操作属性的方法：
//di.style.name=size;//操作失败，name会被当作字符串引用
//第二种操作属性的方法：
di.style[name]=size;//操作成功
}
</script>
</head>
<body>
<input type="button" value="变宽" onclick="setC('width','50px')"/>
<input type="button" value="标高" onclick="setC('height','50px')"/>
<input type="button" value="变绿" onclick="setC('background','yellow')"/>
<div id="div1"></div>
</body>
</html>
3.两种方式更改元素样式（class Name & style）
style 为行间样式，元素调用style属性的时候，在标签行添加样式，优先级大于class Name。
<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;
border:1px solid }
.box{
background:#F00}
</style>
<script>
function tored(){
var di=document.getElementById('div1');
<!--以下两种方式的效果一样-->
di.style.background='red';
di.className='box';
}
</script>
</head>
<body>
<input type="button" value="变红" onclick="tored()"/>
<!--点击按钮：<div id="div1" style="background: red;"></div>-->
<!--style样式为行间样式-->
<div id="div1"></div>
</body>
</html>通过style和className两种方式对div样式进行修改：
style ：可以直接获取元素的属性对其进行直接赋值
className ：用定义好的class样式
<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;
border:1px solid }
.box{
background:#3C3;}
</style>
<script>
function tored(){
var di=document.getElementById('div1');
//通过style 设置div的行间样式
di.style.background='red';
}
function togreen(){
var di=document.getElementById('div1');
//通过className来改变背景色
di.className='box';//不能直接赋值为‘green’，要赋值其相对应的写好的box
}
</script>
</head>
<body>
<!--点击按钮：<div id="div1" style="background: red;"></div>-->
<!--style样式为行间样式-->
<input type="button" value="变红" onclick="tored()"/>
<!--点击按钮:<div id="div1" class="box"></div>-->
<input type="button" value="变绿" onclick="togreen()"/>
<div id="div1"></div>
</body>
</html>
style的优先级高于className，所以点完变红之后，再点变绿的按钮就不生效，还是红色；
先点变绿的按钮，再点变红，红色还可以生效；
在以后设置标签的时候要只选择一种使用。
4.提取行间事件
在行间添加点击事件，容易被其他人改动，比较危险；
如果遇到多个元素含有相同的点击事件，每个标签都要加点击事件（代码重复度比较高）；
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提取行间事件</title>
</head>
<body>
<input id=" btn1" type="button" value="but"/>
<!--js代码放在body里面-->
<script>
var b1=document.getElementById(' btn1');
<!--第一种提取行间事件的方法，声明一个函数，将其对应的事件写在函数里，再赋给onclick事件-->
function abc(){
alert('haha');
}
b1.onclick=abc
<!--第二种（最简单，常使用的一种）：使用匿名函数，省去了取名字的烦恼-->
b1.onclick=function(){alert('haha');};
</script>
</body>
</html>
上面的代码是将js放在了body标签的里面，将其放在body标签的外面，报错。原因是，在执行js事件时，下面body中的代码还没有加载出来。
改过后如下：
加上 window.onload=function(){}–成功
window.onload 表示界面加载完成后，在执行该事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提取行间时间</title>
<!--将js代码放在body标签外面--报错！
加上 window.onload=function(){}--成功
window.onload 表示界面加载完成后，在执行该事件-->
<script>
window.onload=function(){
var b1=document.getElementById(' btn1');
b1.onclick=function(){alert('haha');};
}
</script>
</head>
<body>
<input id=" btn1" type="button" value="but"/>
</body>
</html>5.通过标签获取元素组
虽然提取出了行间事件，但是由于id不能重复，所以每个元素都要进行document.getElementById(’ id’);来获取元素，在逐一进行调用。这样也很麻烦，现在引用下面一种元素的方法：document.getElementsByTagName(‘标签’);，通过标签来获取元素组。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过标签获取元素组</title>
<style>
div{
width:200px;
height:200px;
border:1px solid;
margin:2px;}
</style>
<script>
window.onload=function(){
var b1=document.getElementsByTagName('div');
<!--b1是一个数组-->
/*b1.style.background='red';*/ <!--错误！只能对一个元素设置样式-->
alert(b1.length);
for(i=0;i<b1.length;i++){
b1[i].style.background='red';}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>