Maison > Article > interface Web > Comment obtenir un style non interligne à l'aide de la fonction CSS à paramètre variable

Comment obtenir un style non interligne à l'aide de la fonction CSS à paramètre variable

小云云original: 2018-03-14 16:48:581396parcourir

Cet article partage principalement avec vous la méthode d'obtention d'un style non interligne avec une fonction CSS à paramètres variables. J'espère qu'il pourra vous aider.

1. Paramètres variables

<!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. Fonction 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. Obtenez un style non interligne
Lors de l'utilisation de window.onload(), Aucune autre fonction ne peut être imbriquée à l'intérieur, mais d'autres fonctions peuvent être appelées.
Il existe deux manières d'obtenir des styles non en ligne.
La première est : la méthode d'utilisation de currentStyle est la même que celle de style, mais elle n'est compatible qu'avec IE.
La seconde est : getComputedStyle, la méthode d'utilisation est getComputedStyle(op, false).width; le premier paramètre est le nom de l'objet à obtenir, le deuxième paramètre est une valeur arbitraire.
Lors de l'obtention de styles interlignes, vous ne pouvez pas utiliser getComputedStyle pour obtenir des styles composés, tels que l'arrière-plan, mais si vous souhaitez obtenir la couleur d'arrière-plan, vous pouvez utiliser 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>

Recommandations associées :

Comment obtenir un style non-inline ? Utilisez js et jquery pour obtenir des styles non interlignes

JS pour obtenir des styles non interlignes et des problèmes de compatibilité_html/css_WEB-ITnose

À propos du CSS non-interline Comment utiliser le style, résoudre ~_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment ajouter des balises et des attributs Li avec jQueryArticle suivant：Comment ajouter des balises et des attributs Li avec jQuery

Articles Liés

Voir plus