前端开发--JavaScript--函数定义与执行、提取行间事件、匿名函数、练习（网页换肤）
程序员文章站
2022-04-02 10:40:57
...
意思是 可以在后面定义，在前面调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function fnMyslert(){
alert('hello world');
}
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1" onclick='fnMyalert()'>这是一个div元素</div>
<input type="button" name='' value='改变div' onclick='fnChange()'>
</body>
</html>
提取行间事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
oBtn.onclick = fnChange;
// 将事件属性和一个函数关联时，函数不能写小括号，写了会马上执行。
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
}
}
</script>
</head>
<body>
<div id="div1" >这是一个div元素</div>
<input type="button" name='' value='改变div' id='btn01'>
</body>
</html>
点击按键
匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
oBtn.onclick = function (){
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
};
}
</script>
</head>
<body>
<div id="div1" >这是一个div元素</div>
<input type="button" name='' value='改变div' id='btn01'>
</body>
</html>
效果和上面的程序一样。只是简化了。不用想那么多函数名。
综合练习：网页换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/skin01.css" id='link01'>
<script type="text/javascript">
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oLink = document.getElementById('link01');
oBtn01.onclick = function(){
oLink.href = 'css/skin01.css';
}
oBtn02.onclick = function(){
oLink.href = 'css/skin02.css';
}
}
</script>
</head>
<body>
<input type="button" name='' value='背景1' id='btn01'>
<input type="button" name='' value='背景2' id='btn02'>
</body>
</html>