可变参数，css函数，获取非行间样式

最新推荐文章于 2023-04-05 21:14:08 发布

Alex十年

最新推荐文章于 2023-04-05 21:14:08 发布

阅读量270

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79516855

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、可变参数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可变参数</title>
    </head>
    <script>
        window.onload= function(){
            function sum1(){
                var sum=0;
                for(var i=0;i<arguments.length;i++){
                    sum+=arguments[i];
                }
                return sum;
            }
            alert(sum1(1,2,3,4,5,6,7));
        }

    </script>
    <body>

    </body>
</html>

2、css函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css函数</title>
        <script>
            window.onload=function(){
                //css1()和css2()是两个函数，但是功能是相同的。为了防止arguments出现太多容易混乱。所以给他们起一个名字
                function css1(){
                    if(arguments.length==2){
                        //记得填写return，这样外部才能接收
                        return arguments[0].style[arguments[1]];
                    }else{
                        arguments[0].style[arguments[1]]=arguments[2];
                    }
                }
                function css2(obj,name,value){
                    if(arguments.length==2){
                        //记得填写return，这样外部才能接收
                        return obj.style[name];
                    }else{
                        obj.style[name]=value;
                    }
                }
                var oDiv = document.getElementById('oDiv');
                    alert(css2(oDiv,'width'));
                    //里面使用的是字符串
                    css2(oDiv,'background','green');                
            }
        </script>
    </head>
    <body>
        <div id='oDiv' style="width: 100px;height: 100px;background: red;">

        </div>
    </body>
</html>

3、获取非行间样式
使用window.onload（）时，里面不能嵌套别的函数，但是可以调用别的函数。
获取非行间样式有两种方法。
一是：currentStyle使用方法和style相同，但是只有IE兼容，
二是：getComputedStyle，使用方法是getComputedStyle(oDiv，false).width;其中第一个参数是要获取的对象的名称，第二个参数是一个随意的值。
取行间样式时，不能够使用getComputedStyle来取复合样式，比如background，但是如果想要取背景颜色，可以使用backgroundcolor

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取非行间样式</title>
        <style>
            #div1{width: 300px; height: 200px; background: red;}
        </style>
        <script>
            window.onload=function(){               
                huoqu();
            }
            function huoqu(){
                    var oDiv = document.getElementById('div1');
                    if(oDiv.currentStyle){
                        alert(oDiv.currentStyle.width);
                    }else{
                        alert(getComputedStyle(oDiv,false).width); 
                    }

                }
        </script>
    </head>
    <body>
        <div id='div1'> 
        </div>
    </body> 
</html>

Alex十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可变参数，css函数，获取非行间样式

1、可变参数&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;可变参数&lt;/title&gt; &lt;/head&gt; &lt;script&gt;
复制链接

扫一扫