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

我正在做一个新手向导的页面。想根据已有的某个输入框，然后在边上生成一个提示框，告诉用户这个框是做什么用的。需要把这个提示框做出一个带箭头的样子。

比如外部需要导入的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 值。

请问是什么原因？该如何修改？