Home > Article > Web Front-end > How to obtain non-interline style using variable parameter css function

How to obtain non-interline style using variable parameter css function

小云云Original: 2018-03-14 16:48:581399browse

This article mainly shares with you the method of obtaining non-interline style with variable parameter css function. I hope it can help you.

1. Variable parameters

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

<!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. Obtain non-interline style
When using window.onload(), it cannot be nested inside Other functions, but can call other functions.
There are two ways to obtain non-interline styles.
The first is: the usage method of currentStyle is the same as style, but it is only compatible with IE.
The second is: getComputedStyle, the usage method is getComputedStyle(op, false).width; where the first parameter is the name of the object to be obtained , the second parameter is an arbitrary value.
When getting interline styles, you cannot use getComputedStyle to get compound styles, such as background, but if you want to get the background color, you can use 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>

Related recommendations:

How to get non-interline style? Using js and jquery to obtain non-interline styles

JS to obtain non-interline styles and compatibility issues_html/css_WEB-ITnose

About css non-interline How to use style, solve ~_html/css_WEB-ITnose

The above is the detailed content of How to obtain non-interline style using variable parameter css function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to add li tags and attributes with jQueryNext article：How to add li tags and attributes with jQuery

See more

How to obtain non-interline style using variable parameter css function

Related articles