好吧,这一点很难解释。我有一个带有类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;来强制更新元素,但我不知道这是否有效。)
加载页面时,可能会发生以下情况:
- 创建
myDiv
元素 - 页面请求
index.cgi
- 您的样式代码运行,选择所有
p
、li
等。但由于index.cgi
尚未加载,因此没有元素可供选择 index.cgi
最终加载并执行,创建所有这些p
、li
(等等)元素。由于样式代码已经运行,因此这些代码从未进行过样式设置
将<style></style>
元素与样式信息一起放在标头中!
至于为什么index.cgi
创建的元素比您预期的要多,我们无从知晓,因为您还没有向我们提供index.cgi
代码。修复可能异常复杂,因为您无法访问该脚本。
关于"你应该走的方向"的一般建议,我建议你研究jQuery库。这个库具有简单/优雅的语法,用于常见任务,如:
- 选择DOM元素并与它们进行批量交互
- 隐藏/显示动画
- 事件处理
如果你感到沮丧或在截止日期前。CSS3非常强大,您可以在原始CSS(高级)或原始CSS和一点JavaScript(简单!)中创建漂亮的隐藏/显示交互。我总是提倡学习细节。尝试在StackOverflow上搜索您的特定问题;其中许多问题已经得到解答!