Dom 为外部对象设置样式？答案

【问题标题】：Dom Styling a External Object?Dom 为外部对象设置样式？
【发布时间】：2016-07-20 15:37:03
【问题描述】：

好的，这个很难解释。我有一个带有 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 个元素。我不知道为什么会这样。

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

谢谢，乔什

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

【问题讨论】：

嗯，你说“我有一个空的 div 类 myDiv”，它不是一个类，它是一个 id。如果您对动态代码进行 css 样式设置，它仍然可以工作。也许您的 css 代码中有错误（例如，您尝试使用 .myDiv 而不是 #myDiv 进行样式设置？）。您可以使 h2 可点击没问题。我不确定使用纯 javascript 的情况如何，但使用 jquery，您无法像使用普通内容一样在动态加载的内容上运行 js 代码。（stackoverflow.com/questions/203198/…供参考）

标签： javascript html css dom

【解决方案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 上搜索您的具体问题；其中许多已经得到答复！

【讨论】：