console.log(window.location.href);
var btnFontSize=document.querySelector('input');
var btnColor=document.querySelector('.change-color');
var currentPseudo=document.querySelector('.test');
var stylesheets=document.styleSheets;
var sheet;
if(stylesheets){
    sheet=stylesheets[stylesheets.length-1];
  // console.log(sheet);
  // console.log('sheet.cssRulesLength='+sheet.cssRules.length);
}else{
    var style=document.createElement('style');
    document.head.appendChild(style);
}
btnColor.addEventListener('click',function(){
  //粗略实现的改变颜色，未做切换。
  currentPseudo.classList.add('test-red');
});
var currentFontSize=window.getComputedStyle(currentPseudo,'::before').getPropertyValue('font-size');//获取当前伪元素字体大小。
var cssRulesLength=(sheet.cssRules.length);//不‘-1’是因为这样才是在最后一位，否则加入的样式会变成倒数第二
console.log('cssrule='+cssRulesLength+'currentFont='+currentFontSize);
sheet.insertRule('.test::before{font-size:'+currentFontSize+'}',cssRulesLength);//在最后一个style标签的最后位置添加当前字体大小样式。这么做是为了后面删除添加上去的cssRule，否则最后css表会变得巨大无比
btnFontSize.addEventListener('input',function(){
//拖动滑块改变文字大小
  var changeFontSize=btnFontSize.value;
  currentPseudo.setAttribute('data-font',changeFontSize);
  var index=sheet.cssRules.length-1;
  console.log('index='+index);
 sheet.deleteRule(index);//删除最后一行样式（这里是前面添加的字体大小样式，不直接删除是为了防止误删除影响其他属性
  sheet.insertRule('.test::before{font-size:'+changeFontSize+'px}',index);
  // sheet.insertRule('.test::before{font-size:16px}',index);
});