<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数传参(可变参)arguments</title> <script> /* 本小结的学习重点主要是arguments的使用 其次就是了解可变参函数的应用, 这里用到了css()样式函数来讲解. 1. arguments是一个数组, 它里面保存的是函数的所有的入参 2. 了解css()函数中的两种用法 1. 当只有两个参数的时候, 代表的是获取标签的样式的属性值 2. 当有三个参数的时候, 代表的是获取标签的样式的属性, 并将该属性的值修改为第三个参数的值 */ function css() { var obj = arguments[0]; var name = arguments[1]; var value = arguments[2]; if (arguments.length == 2) { // css("odiv", 'width') 这个其实是jQuery中的函数, 当是有两个参数的时候, 是获取标签的样式 // 注意arguments[1]获取的是数组中的元素, 显然这里是个字符串 // 所以要使用style[arguments[1]]来调用标签的样式的属性 return obj.style[name]; } else if (arguments.length == 3) { // 当有三个参数的时候, 就是给标签的哪个样式赋值的意思 return obj.style[name] = value; } } window.onload = function () { var odiv = document.getElementById("div1"); /* 预计的输出结果是这样的: 1. 首先是弹出div标签的样式的width属性的值是300px 2. 然后是看到页面中的div的宽度发生了变化, 其实这个变化是早就在调用了css()函数后就已经发生的事情 */ alert(css(odiv, 'width', '300px')); } </script> </head> <body> <div id="div1" style=" 200px; height: 200px; background: green;"></div> </body> </html>