前端开发--JavaScript--函数传参

最新推荐文章于 2025-02-05 15:46:23 发布

小哦--

最新推荐文章于 2025-02-05 15:46:23 发布

阅读量435

点赞数

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/96854441

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

43 篇文章

订阅专栏

本文通过三个示例展示了如何使用JavaScript进行DOM元素样式的动态修改，包括颜色、字体大小及背景色；并介绍了如何定义函数进行简单的数值运算，最后提供了一个用户输入数值并显示计算结果的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		window.onload = function(){

			function fnChangestyle(mystyle, value){
				var oBtn01 = document.getElementById('div1');
				oBtn01.style[mystyle] = value;
			}

			fnChangestyle('color', 'red');
			fnChangestyle('fontSize', '30px');
			fnChangestyle('backgroundColor', 'pink');
		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
</body>
</html>

在这里插入图片描述

返回值：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		function fnAdd(a, b){
			var c = a + b;
			return c;
			//   返回c的值，然后结束函数的运行
			alert('内部的c=' + c);  // 这句不显示，不会执行。
		}

		var iResult = fnAdd(1, 2);
		alert(iResult);
	</script>
</head>
<body>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		window.onload = function(){

			var oInput01 = document.getElementById('input01');
			var oInput02 = document.getElementById('input02');
			var oBtn01 = document.getElementById('btn01');

			oBtn01.onclick = function(){
				var num01 = parseInt(oInput01.value);
				var num02 = parseInt(oInput02.value);
				alert(num01 + num02);
			}
		}
		
	</script>
</head>
<body>
	<input type="text"  name=''  id='input01'>+
	<input type="text"  name=''  id='input02'>
	<input type="button"  name=''  value='相加'  id='btn01'>
</body>
</html>

在这里插入图片描述