Heim > Artikel > Web-Frontend > So erhalten Sie einen Nicht-Interline-Stil mithilfe der CSS-Funktion mit variablen Parametern

So erhalten Sie einen Nicht-Interline-Stil mithilfe der CSS-Funktion mit variablen Parametern

小云云Original: 2018-03-14 16:48:581389Durchsuche

Dieser Artikel zeigt Ihnen hauptsächlich die Methode zum Erhalten eines Nicht-Interline-Stils mit der CSS-Funktion mit variablen Parametern. Ich hoffe, er kann Ihnen helfen.

1. Variable Parameter

<!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-Funktion

<!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. Bei Verwendung von window.onload() Es können keine anderen Funktionen darin verschachtelt werden, es können jedoch andere Funktionen aufgerufen werden.
Es gibt zwei Möglichkeiten, Nicht-Inline-Stile zu erhalten.
Die erste ist: Die Verwendungsmethode von currentStyle ist dieselbe wie die von style, aber sie ist nur mit IE kompatibel.
Die zweite ist: getComputedStyle, die Verwendungsmethode ist getComputedStyle(op, false).width; Der erste Parameter ist der Name des abzurufenden Objekts, der zweite Parameter ist ein beliebiger Wert.
Wenn Sie Interline-Stile erhalten, können Sie getComputedStyle nicht verwenden, um zusammengesetzte Stile wie den Hintergrund abzurufen. Wenn Sie jedoch die Hintergrundfarbe erhalten möchten, können Sie Hintergrundfarbe verwenden

<!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>

Verwandte Empfehlungen:

Wie bekomme ich einen Nicht-Inline-Stil? Verwenden Sie js und jquery, um Nicht-Interline-Stile zu erhalten

JS, um Nicht-Interline-Stile und Kompatibilitätsprobleme zu erhalten_html/css_WEB-ITnose

Über CSS Nicht-Interline So verwenden Sie den Stil, lösen Sie ~_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo erhalten Sie einen Nicht-Interline-Stil mithilfe der CSS-Funktion mit variablen Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So fügen Sie Li-Tags und -Attribute mit jQuery hinzuNächster Artikel：So fügen Sie Li-Tags und -Attribute mit jQuery hinzu

In Verbindung stehende Artikel

Mehr sehen