javascript - Dom 样式化外部对象？

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。其次，出于某种原因，p 在只有 7 个元素时显示了 14 个元素。我不知道为什么会这样。

无论如何，关于我应该去的方向有什么建议吗？使它们可点击和隐藏并能够设计它们的样式？想法？顺便说一句，我无权访问该外部脚本。

谢谢， 乔希

(我还在这里读到我可以执行 .cssText += "; "+ strNewCSS; 来强制更新元素，但我不知道这是否可行。)

Answer 1

当您加载页面时，可能会发生以下情况:

1. myDiv元素已创建。
2. 页面请求index.cgi
3. 您的样式代码运行，选择所有 p , li , 等等 但是因为 index.cgi尚未加载，没有可供选择的元素!
4. index.cgi最后加载并执行，创建所有这些 p , li (等)元素。这些从不设置样式，因为样式代码已经运行。

放置一个<style></style>标题中的元素使用您的样式信息代替!

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

关于“你应该走的方向”的一般建议，我建议你研究jQuery图书馆。该库具有简单/优雅的语法，适用于常见任务，例如:

1. 选择 DOM 元素并与它们批量交互
2. 隐藏/显示动画
3. 事件处理

那是在您感到沮丧或在截止日期前。 CSS3 非常强大，您可以在原始 CSS(高级)或原始 CSS 和一点点 JavaScript(简单!)中创建漂亮的隐藏/显示交互。我一直提倡学习基本要素。尝试在 StackOverflow 上搜索您的具体问题；许多问题已经得到解答!