2018阿里秋招模拟测评题——javascript写css选择器

最新推荐文章于 2022-05-27 22:22:00 发布

abuqueen

最新推荐文章于 2022-05-27 22:22:00 发布

阅读量152

点赞数

本文链接：https://blog.csdn.net/abuqueen/article/details/82422462

版权

写一个方法，输入css规则和选择器字符串，输出对应的css样式

分析：选择器字符串计算权值，并排序。按从小到大的权值顺序获取css样式的值，先获取最小权值的css样式并赋值给result对象，如果权值大的有同样的样式就覆盖掉，如果权值大的新的样式就添加到result对象中。

//css规则，测试使用
var ruler={
    "a":{
        width:'100px',
        height:'100px'
    },
    "#content .link a":{
        height:"120px",
        position:"fixed",
        color:"green"
    },
    "#content a":{
        width:"120px",
        position:"absolute"
    },
    ".link":{
        display:"none",
        width:'200px'
    },
    ".link a":{
        display:"block",
        width:'300px',
        color:'red'
    }
}
//权值
var weight={
    '#':100,
    '.':10,
    '':1
}
//"#content .link a"-> {height:"120px",position:"fixed",width:"120px", display:"none"}
//输入css选择器，输出css样式
function getRuler(ruler,str) {
    // body...
    //先获取输入字符串（选择器）的权值
    var result={},strArr=[],strKey=0;
    strArr=str.split(' ');
    console.log("strArr="+strArr);
    for (var i = 0; i < strArr.length; i++) {
       // console.log("strArr[i][0]="+strArr[i][0]);
        if (strArr[i][0]=="#") {
                strKey+=100;
            }else if (strArr[i][0]==".") {
                strKey+=10;
            }else{
                strKey+=1;
            }
    }
   // console.log("strKey="+strKey);
   //计算css规则的各个权值
    var keys=[],j=0;
    for(rule in ruler){
        var count=0;
        var arr=[];
        arr=rule.split(' ');
        for(var i=0;i<arr.length;i++){
            if (arr[i][0]=="#") {
                count+=100;
            }else if (arr[i][0]==".") {
                count+=10;
            }else{
                count+=1;
            }
        }
        //console.log("rule="+rule);
         ruler[rule]['key']=count;
         //console.log("ruler[rule]['key']="+ruler[rule]['key']);
         keys[j]=count;
         j++;
    };
   // console.log("keys="+keys);
   //对权值进行排序
    var compare = function (x, y) {//比较函数
        if (x < y) {
            return -1;
        } else if (x > y) {
            return 1;
        } else {
            return 0;
        }
    }
    keys.sort(compare);
    //console.log("keys="+keys);
    //按从小到大的权值顺序获取css样式的值，先获取最小权值的css样式并赋值给result对象，如果权值大的有同样的样式就覆盖掉，如果权值大的新的样式就添加到result对象中
    var i=0;
    while(keys[i]<=strKey){
       // console.log("keys[i]="+keys[i]);
         for(rule in ruler){
           // console.log("ruler[rule]['key']-----2="+ruler[rule]['key']);
            if (keys[i]==ruler[rule]['key']) {
                for (index in ruler[rule]){
                    //console.log("index="+index);
                    if (index!=="key") {
                        result[index]=ruler[rule][index];
                    }
                };
            }
        };
        i++;
    }
    //最后结果
    return result;
}
//测试
var value=getRuler(ruler,".link a");
console.log(value);

有错误的话欢迎指正~~~