javascript错误'无法读取未定义的属性'答案

【问题标题】：javascript error 'cannot read property of undefined'javascript错误'无法读取未定义的属性'
【发布时间】：2015-10-26 06:29:30
【问题描述】：

javascript、html 和 css 在这个 jsfiddle 中工作但是当像这样进入一个 html 文件时：

<!doctype html>
<html>
  <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            var target = $(".mypara").offset().top;
            var interval = setInterval(function() {
                if ($(window).scrollTop() >= target) {
                    alert("made it!");
                    clearInterval(interval);
                    }
            }, 250);
        </script>
        <style>
            body {
            background-color: linen;
            height: 1000px;
            }
            p {
             color: blue;
              margin-top: 500px;
            }
        </style>

    </head>
    <body>
     <p class="mypara">asdfasdfasf</p>
    </body>
</html>

chrome 控制台出现此错误

未捕获的类型错误：无法读取未定义的属性“顶部”（匿名函数）@ index - Copy.html:8

此错误指的是第 8 行：

var target = $(".mypara").offset().top;

有人可以帮我理解为什么吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

将代码包装在

中

$(document).ready (function (){
    // code here
});

您尝试在 DOM 中的元素存在之前访问它，因此当您尝试访问该类时，该项目尚不存在。或者将您的脚本移到 html 中的元素下方

在小提琴中工作，因为它会根据您的设置包装您的代码，我相信它默认为 domready

【讨论】：

发生在我们所有人身上。有时只需要第二双眼睛。

【解决方案2】：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">

        <style>
            body {
                background-color: linen;
                height: 1000px;
            }
            p {
                color: blue;
                margin-top: 500px;
            }
        </style>
    </head>

    <body>
        <p class="mypara">asdfasdfasf</p>
        <p class="mypara">Include js files to be at the bottom so that it would be the one to be loaded accordingly</p>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            // if document is ready then
            // its the only time to execute
            // process withing the block
            $(document).ready(function() {
                var target = $(".mypara").offset().top;
                var interval = setInterval(function() {
                    if ($(window).scrollTop() >= target) {
                        alert("made it!");
                        clearInterval(interval);
                    }
                }, 250);
            });

            </script>
    </body>
</html>

【讨论】：