首頁 > web前端 > js教程 > 可變參數css函數取得非行間樣式的方法

可變參數css函數取得非行間樣式的方法

小云云
發布: 2018-03-14 16:48:58
原創
1403 人瀏覽過

本文主要和大家分享可變參數css函數取得非行間樣式的方法,希望能幫助大家。

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 op = document.getElementById(&#39;op&#39;);
                    alert(css2(op,&#39;width&#39;));                    //里面使用的是字符串
                    css2(op,&#39;background&#39;,&#39;green&#39;);                
            }        </script>
    </head>
    <body>
        <p id=&#39;op&#39; style="width: 100px;height: 100px;background: red;">

        </p>
    </body></html>
登入後複製

3、取得非行間樣式
使用window.onload()時,裡面不能嵌套別的函數,但是可以呼叫別的函數。
取得非行間樣式有兩種方法。
一是:currentStyle使用方法和style相同,但是只有IE相容,
二是:getComputedStyle,使用方法是getComputedStyle(op,false).width;其中第一個參數是要取得的物件的名稱,第二個參數是一個隨意的值。
取行間樣式時,不能夠使用getComputedStyle來取複合樣式,例如background,但是如果想要取背景顏色,可以使用backgroundcolor

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

                }        </script>
    </head>
    <body>
        <p id=&#39;p1&#39;> 
        </p>
    </body> </html>
登入後複製

相關推薦:

#如何取得非行間樣式?利用js和jquery取得非行間樣式

JS取得非行間樣式及相容問題_html/css_WEB-ITnose

關於css非行間的style用法,解出~_html/css_WEB-ITnose

#

以上是可變參數css函數取得非行間樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板