学的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.οnlοad=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>