前端开发--JavaScript--函数定义与执行、提取行间事件、匿名函数、练习（网页换肤）

最新推荐文章于 2024-08-10 20:02:22 发布

小哦--

最新推荐文章于 2024-08-10 20:02:22 发布

阅读量201

点赞数

分类专栏： html +css +javascript

本文链接：https://blog.csdn.net/sundanping_123/article/details/96850683

版权

html +css +javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在这里插入图片描述

意思是可以在后面定义，在前面调用。

<!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>

在这里插入图片描述