js 操纵css伪元素 :after :before

写在前面

导航条的下边滑块，本身是采用:before来写，

好处就是代码比较工整好维护，可是因为要求是可配置的因此不管滑块的位置仍是宽度都须要更改伪元素才能够，这直接css目前是没办法作到的

ps: attr()目前浏览器只支持content属性使用

往body中嵌入css

var css = '._tab_index:before{content: " ";height: '+args.active.weight+';width: '+ms.itemWidth+'%;left: 0;'+set+';background: '+args.active.color+';position: absolute;}'
        	
// for (var i = ms.itemNum - 1; i >= 0; i--) {
// 	css+='._tab_index[active="'+i+'"]:before{left: '+i*ms.itemWidth+'%;}'
// }
$('<style>'+css+'</style>').appendTo('head');

这部分经过能够经过改变active属性来达到js操纵滑块，可是因为不是直接修改属性，若是要有无极的效果，则还须要想办法

从新编写选择器

参考：http://jsfiddle.net/s3fv8e5v/4/
       ：https://segmentfault.com/q/1010000002452755

//用于伪类选择
ruleSelector:function(selector) {
    function uni(selector) {
        return selector.replace(/::/g, ':')
    }
    return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
        return Array.prototype.slice.call(x.cssRules);
    })), function(x) {
        return uni(x.selectorText) === uni(selector);
    });
},

//设置滑块
setBlock:function(num){
    var Block = this.ruleSelector("._tab_index::before").slice(-1);
    Block.forEach(function(rule) {
        rule.style.left = num;
    })
},