1

我正在使用 CodeIgniter 2.0，我想用 Javascript 更改 div 的内容，但我似乎无法“获得”它。这是一个精简的版本来演示我的问题：

我的控制器：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class Index extends CI_Controller {

    function __construct()
    {
        parent::__construct();
    }

    function index()
    {
        $this->load->view('index.php');
    }
}
/* End of file index.php */
/* Location: ./application/controllers/index.php */

我的观点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php echo $this->config->item('app_name'); ?> : Welcome!</title>    
<script type="text/javascript">   

function returnObjById( id )
{
    if (document.getElementById)
        var returnVar = document.getElementById(id);
    else if (document.all)
        var returnVar = document.all[id];
    else if (document.layers)
        var returnVar = document.layers[id];
    return returnVar;
}

alert('fetching moonstarttime : ' + returnObjById('moonstarttime')  );

</script>
</head>
<body>

<div id="moonstarttime" name="moonstarttime" >I want this</div> 

</body>
</html>

但是当页面加载时，我总是得到fetching moonstarttime : null. 我在 Chrome 和 IE 中都试过了，我在这里做错了什么？

4

6 回答 6

3

javascript 在节点加载之前执行

于 2011-01-29T17:26:02.597 回答
3 
window.onload = function(){
 function returnObjById( id )
 {
    if (document.getElementById)
        var returnVar = document.getElementById(id);
    else if (document.all)
        var returnVar = document.all[id];
    else if (document.layers)
        var returnVar = document.layers[id];
    return returnVar;
 }
 alert('fetching moonstarttime : ' + returnObjById('moonstarttime')  );
}

或者在关闭 body 标记之前将脚本按原样放置，而不需要设置 window.onload。

于 2011-01-29T17:26:48.043 回答
3

您正在页面标题中运行脚本，因此它在正文加载之前运行。您无法访问该元素，因为它还不存在。

将脚本放在元素之后，或者将其放在函数中并从主体的 onload 事件中调用该函数。

于 2011-01-29T17:27:15.920 回答
1

我相信正在发生的事情是您试图在 DOM 完全加载之前检索元素（注意您选择元素的代码在您想要获取的项目之前）。如果您在有问题的元素之后运行代码，您应该获得对它的引用。

顺便说一句，像jQuery这样的 javascript 库确实可以帮助您完成这项工作，并且具有帮助函数ready()（更多信息在这里）确保您的代码仅在页面加载和 DOM 初始化后执行。

于 2011-01-29T17:29:46.387 回答
0

正如其他人提到的，您的函数在构建 DOM 树之前运行。

如果您不想等待该onload功能，例如，如果您加载大量图像，它可能会等待很长时间，那么您可以在此处查看使用注释 (5)，这可能会加快您的明显响应速度页。

http://dean.edwards.name/weblog/2006/06/again/

如果您将代码放在<body>元素之后并延迟，您也可以。因此，您可以setTimeout按照此处所述使用：http: //www.w3schools.com/js/js_timing.asp，并具有以下内容：

setTimeout((function returnObjectById(name) { ... })(), 30);

这将使函数运行延迟 30 毫秒。

于 2011-01-29T17:35:41.770 回答
0

我建议使用 jQuery。它将消除对 if..elseif 的需要以及不必测试所有类型的浏览器功能的需要。

在 jQuery 中：

只需执行此调用：

<script type="text/javascript">
  $(document).ready(function () {

     alert('fetching moonstarttime : ' + $('#moonstarttime')  );

  }
</script>
于 2011-01-29T20:41:22.923 回答