Dom外部对象的样式

好吧，这一点很难解释。我有一个带有类myDiv的空div（例如。）

即。

<div id="myDiv"></div>
<script type="text/javascript" src="http://somesite.com/index.cgi"></script>

div（myDiv）innerHTML通过调用另一个运行此脚本的站点（somesite.com/index.cgi）来替换。。。。

var panel = document.getElementById('myDiv'); 
if(panel){
panel.innerHTML += "<h2>A Title</h2>";
panel.innerHTML += "<p>";
panel.innerHTML += "    Paragraph Info";
panel.innerHTML += "</p>";
panel.innerHTML += "<ul>";
panel.innerHTML += "    <li><a href='"http://somelinks.com/">Link 1</a></li>";
panel.innerHTML += "    <li><a href='"http://somelinks.com/">Link 2</a></li>";
panel.innerHTML += "</ul>";
panel.innerHTML += "<h2>A 2nd Title</h2>";
panel.innerHTML += "<p>";
panel.innerHTML += "    Paragraph Info2";
panel.innerHTML += "</p>";
panel.innerHTML += "<ul>";
panel.innerHTML += "    <li><a href='"http://somelinks.com/">Link 1</a></li>";
panel.innerHTML += "    <li><a href='"http://somelinks.com/">Link 2</a></li>";
panel.innerHTML += "</ul>";
}
etc....

我正在尝试制作这个列表，首先，它更漂亮（css样式），其次，我想让它成为一个可点击的h2和p来下拉以前隐藏的li元素。这有道理吗？

在这一点上，我正在尝试（可能是艰难的方式）为项目获取一个变量，然后通过这样做来改变它们的风格。。。

var i;
var myDiv = document.getElementById("myDiv");
var headers = myDiv.getElementsByTagName("h2");
var paras = myDiv.getElementsByTagName('p'); 
var li = myDiv.getElementsByTagName('li'); 
var ul = myDiv.getElementsByTagName('ul'); 
for (i = 0; i < paras.length; i++) { 
paras[i].style.fontSize = "8px";
}
for (i = 0; i < headers.length; i++) { 
headers[i].style.fontSize = "18px";
}
for (i = 0; i < ul.length; i++) { 
ul[i].style.fontSize = "16px";
}
for (i = 0; i < li.length; i++) { 
li[i].style.fontSize = "14px";
}
</script>

我试过做一个css样式表，但在页面加载后，它似乎没有将其应用于javascript。其次，由于某种原因，当只有7个元素时，p显示了14个元素。我不知道为什么会发生这种事。

不管怎样，关于我该去的方向有什么建议吗？让它们可以点击和隐藏，还可以对它们进行样式设置？想法？顺便说一句，我没有任何访问外部脚本的权限。

谢谢，Josh

（我还在这里读到，我可以执行.cssText++"；"+strNewCSS；来强制更新元素，但我不知道这是否有效。）