如何动态修改外部css表的值并生效

Question

我正在做一个新手向导的页面。想根据已有的某个输入框，然后在边上生成一个提示框，告诉用户这个框是做什么用的。需要把这个提示框做出一个带箭头的样子。
比如外部需要导入的css是这个样子 ，标有“ / / "的 值 将来会根据原有框(一个input divid)计算出来 提示框的 位置及尖角的位置（tip,left,width,height等等)。

aa.css是引用的第二个css.原来默认值是这样的

helpinfoDiv{

top:483px; / /
left:1150px; / /
width:400px; / /
height:50px; / /
border: 2px green solid;
background-color:#fff;
position:relative;
}

helpinfoDiv:before, #helpinfoDiv:after{

width:0px;
height:0px;
border:transparent solid;
position:absolute;
right:100%;
content:""
}

helpinfoDiv:before{

border-width:25px; / /
border-right-color: green;
top:0px;
}

helpinfoDiv:after{

border-width:23px; / /
border-right-color: #fff;
top:2px;
}

我的函数是：

 var helpinfoDiv = document.createElement('div');
  ocument.getElementById("overlay1").appendChild(helpinfoDiv);
        helpinfoDiv.id = 'helpinfoDiv';

/ 修改#helpinfoDiv 这部分的变量 *
var ocssRules=document.styleSheets[1].cssRules || document.styleSheets[1].rules ;

                        
          var style1=ocssRules[0];
          style1.style.left=  "100px";  /*假定值*/
          style1.style.top= "100px";                        
          style1.style.width="150px";
          style1.style.height= "50px";
  
  
  //* 修改#helpinfoDiv:before 这部分的变量 ****        
          var style2=ocssRules[2];    
         style2.style.borderWidth ="15px";
         
  ///// 修改#helpinfoDiv: :: after             
         var style3=ocssRules[3];
         style3.style.borderWidth ="13px";
         
 结果是，没有生效，还是原来引用的的css 值。
 
 请问是什么原因？该如何修改？
       
         
         
         

Answer 1

建议尝试把修改css的部分绑定到一个按钮上，然后点击按钮来改变css。
这么写js文件，和css文件双线程，会在页面加载时一同加载。
当然我觉得这个其实也不太懂，以我的理解是这样的，可以尝试一下。