数组排序处理和获取、设值行内样式等代码教程

数组排序处理和获取、设值行内样式等代码教程

<script type="text/javascript">
//Array.join()  将数组中国所有元素都转化为字符串并连接起来
var a = [1,2,3];   //创建一个包含三个元素的数组
a.join();     //"1,2,3"
a.join(" ");  //"1 2 3"
a.join("");  //"123"
var b = new Array(10);//长度为10的空数组
b.join('-')    //'---------':9个连字号组成的字符串



//Array.sort()   将数组中元素颠倒顺序，返回逆序的数组
var a = [1,2,3];
a.reverse().join()   //原本1,2,3,,现在的a是[3,2,1]
console.log(a)



//Array.sort() 将数组中的元素排序并返回排序后的数组
var b = new Array("bane","oho","jkko");
b.sort();
// alert(b)
var d = b.join(",");     //出来的结果就是[bane,jkko,oho]
console.log(d)


//用数值大小而非字母顺序进行数组排序,如下:
var c = [333,5,445,25,111];
c.sort();  //字母表顺序:111,25,333,445,5
c.sort(function(a,b){
//数值顺序：5,25,111,333,445
return a-b;  //根据顺序，返回负数、0、正数
});
//console.log(c)
c.sort(function(a,b){return b-a});    //数值大小相反的顺序
//console.log(c)



// 另一个数组元素排序的例子,可能需要对一个字符串数组执行不区分大小写的字母表排序,
// 比较函数首先都将参数都转成小写字符串（使用tolowerCase()
n = ['ant',  'cat','Bug', 'Dog']
n.sort();  //区分大小写的排序['Bug', 'Dog', 'ant'; 'cat']
//console.log(n)
n.sort(function(s,t){
var q = s.toLowerCase();
var w = t.toLowerCase();
if(q<w) return -1;
if(w>q) return 1;
return 0;
});
//console.log(n)



//Array.concat()创建并返回一个新的数组
var r = [1,2,3];
r.concat(4,5)
//console.log(r)
r.concat([4,5])
console.log(r)
</script>

方法一： 先用arguments把整个参数封装起来,然后下面进行调用 以下的只适用于在行间设值的时候使用。

<script type="text/javascript">
            
            
            
            
            function css(){
                if(arguments.length==2){  //如果长度为2的时候，使用方式如下
                    return arguments[0].style[arguments[1]]  
                }else if(arguments.length==3){//或者如果长度为3的时候，使用方式如下
                    return arguments[0].style[arguments[1]]=arguments[2];
                    
                }
            }
            window.onload=function(){
                var oBox=document.getElementById('box');   //先声明变量
//              alert(css(oBox.width))
                console.log(css(oBox,'width'));            //长度为2的时候使用的方式    
                css(oBox,'backgroundColor','blue');        // 长度为3的时候使用的方式
            }
        </script>


给一个盒子
<p id="box" style="width: 500px;height: 50px;background: red;"></p>

方法二：

        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: red;            }
        </style>



        <script type="text/javascript">
            window.onload=function(){
                var oBox=document.getElementById('box');
                alert(getByClass(oBox,'height'))                
                function getByClass(obj,name){  
                    if(obj.currentStyle){   //如果在ie浏览器兼容的时候
                        return obj.currentStyle[name];   //获取方式为[name]
                    }else{
                        return getComputedStyle(obj,false)[name];   //否则就是(obj,'name')
                    }
                }
            }
        </script>


       <p id="box"></p>