javascript - 以脚本呈现的 ID 为目标

Question

我正在使用一个漂亮的小脚本，称为 Tabifier ( http://www.barelyfitz.com/projects/tabber/ )

现在，长话短说，我在 head 标签中运行的这个脚本创建了一个<ul>包含<li>s 的<a>s。同样在 head 标签中，它为这些<a>s 创建 ID。当我检查加载的站点时，我可以清楚地看到存在的 ID 标签。但是，我不能使用 getElementById 调用它们。我一直在使用

<script>
    document.getElementById('rightpanelnav1').style.padding='200px';    
</script>

作为我代码不同部分的示例脚本，但无济于事。我想知道是不是这些东西在我的代码中定义的位置或顺序导致它无法识别 ID。你怎么看？

编辑：我在下面收到了一个很好的答案，但我仍然无法获得 'rightpanelnav1' 来注册 onclick 事件......？是的，应该没有问题吧？当我点击它时，整个页面已经加载了几秒钟......

score 4 · Accepted Answer

首先，为了访问 DOM 中的元素，该元素必须是 DOM ( document) 的一部分。因此，如果您将<script>withgetElementById放置在页面中加载元素之前的位置，它将不会在 DOM 中看到该元素。

其次，您使用的这个库很可能会在页面加载时对其进行修改，这意味着无论您将其放置在何处，<script>它在运行之前都没有机会看到这些元素。

因此，您也应该让脚本等待，然后执行以下操作：

window.onload = function(){
 document.getElementById('rightpanelnav1').style.padding='200px';
};

或者对于点击事件

window.onload = function(){
 document.getElementById('rightpanelnav1').onclick = function(){
  alert("clicked!");
 };
};

1 回答 1