Question

我在angular-js中为鼠标悬停文本编写了代码。我需要悬停文本出现在鼠标指针所在的位置但不幸的是它没有发生。悬停文本在特定位置保持固定，google-Chrome开发人员工具显示错误Uncaught TypeError: Cannot read property 'style' of null
即使我在id标记中指定了div，但它未检测到id属性。

以下是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script>
    var tooltipSpan = document.getElementById("demo");

    window.onmouseover = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};
    </script>

</head>
<body ng-app="">

    <div id="demo" ng-init="tooltip=false" ng-show="tooltip" style="border: 1px solid black;width: 230px;height: 40px;background-color: gray;color: white;z-index: 1;position: fixed;">Hi..Welcome In Angular JS World.</div>


    <table border=1>
    <tr><th>col1</th><th>col2</th></tr>
    <tr><td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 1</td>  <td>data 2</td></tr>
    <tr><td>data 1</td>   <td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 2</td></tr>
    </table>

</body>
</html>

Answer 1

问题是在页面加载完成之前正在执行var tooltipSpan = document.getElementById("demo"); - 因此变量tooltipSpan为null

我已修改您的示例，以便在正文加载后设置tooltipSpan

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script>



      var tooltipSpan;

    function setTooltip() {
      tooltipSpan = document.getElementById("demo");
    }

    window.onmousemove = function (e) {
      if (!tooltipSpan) return;
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};
    </script>

</head>
<body ng-app="" onload='setTooltip()'>

    <div id="demo" ng-init="tooltip=false" ng-show="tooltip" style="border: 1px solid black;width: 230px;height: 40px;background-color: gray;color: white;z-index: 1;position: fixed;">Hi..Welcome In Angular JS World.</div>


    <table border=1>
    <tr><th>col1</th><th>col2</th></tr>
    <tr><td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 1</td>  <td>data 2</td></tr>
    <tr><td>data 1</td>   <td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 2</td></tr>
    </table>

</body>
</html>

Answer 2

由于您在html之前加载了javascript，document.getElementById("demo")最终为null，因为DOM尚未加载。

尝试将javascript移到底部（我把它放在body标签之后，但不确定这是最佳做法）。这样DOM首先加载，然后你的javascript知道在哪里找到“demo”的id。

angularjs：鼠标悬停文本未出现在鼠标（x，y）位置

2 个答案: