P17 演示arguments的用法 

<!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="width: 200px; height: 200px; background: green;"></div>
</body>

</html>

 

posted @ 2020-07-12 00:42  Runmoxin  阅读(121)  评论(0)    收藏  举报