Question

好的，这个解释起来很棘手。我有一个带有myDiv类的空div（例如。）

即。

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

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

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个元素。我不知道为什么会这样。

无论如何，关于我应该去的方向的任何建议？使它们可以点击和隐藏，还能够设置它们的样式？想法？顺便说一下，我无法访问该外部脚本。

谢谢，约什

（我也在这里读到我可以做一个.cssText + =＆＃34 ;;＆＃34; + strNewCSS;强制元素更新，但我不知道这是否有效。）

Answer 1

当您加载页面时，这是（可能）发生的事情：

创建了myDiv元素。
页面请求index.cgi
您的样式代码会运行，选择所有p，li等。但由于index.cgi尚未加载，因此无法选择任何元素！
index.cgi最终加载并执行，创建所有p，li（等）元素。这些从未设置样式，因为样式代码已经运行。

在标题中放置<style></style>元素，而不是您的样式信息！

至于为什么index.cgi创建了比预期更多的元素，我们无法知道，因为您没有向我们提供index.cgi代码。修复程序可能异常复杂，因为您无法访问该脚本。

关于“你应该去的方向”的一般建议，我建议你研究jQuery库。该库具有简单/优雅的语法，适用于以下常见任务：

选择DOM元素并批量处理它们
隐藏/显示动画
事件处理

如果你感到沮丧或截止日期，那就是这样。 CSS3非常强大，您可以在原始CSS（高级）或原始CSS和一点JavaScript（简单！）中创建漂亮的隐藏/显示交互。我一直主张学习螺母和螺栓。尝试在StackOverflow上搜索您的特定问题;他们中的许多人已经得到了回答！

Dom造型外部对象？

1 个答案: