1. 首页
  2. 问题列表
  3. 为什么这个javascript代码在stackoverflow上可以工作，而在我的html文件中却不行呢？[副本]
提问者：小点点

为什么这个javascript代码在stackoverflow上可以工作，而在我的html文件中却不行呢？[副本]


javascript noob这里，我有下面的泡菜。

我试图创建一个可调整大小的div，我发现了以下代码:

null

var m_pos;

function resize(event) {
  var parent = resize_el.parentNode;
  var dx = m_pos - event.x;
  m_pos = event.x;
  parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
}
var resize_el = document.getElementById("resize");
if (resize_el) {
  resize_el.addEventListener("mousedown", function(event) {
    m_pos = event.x;
    document.addEventListener("mousemove", resize, false);
  }, false);
}
document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", resize, false);
}, false);
#update_panel {
  position: fixed;
  min-width: 420px;
  padding-left: 4px;
  height: 100%;
  top: 0%;
  right: 0;
  background-color: #f0f0f0;
}

#resize {
  background-color: #ccc;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="update_panel">
    <div id="resize"></div>
  </div>
</body>

</html>

null

我的文件如下所示:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var m_pos;
        function resize(event) {
        var parent = resize_el.parentNode;
        var dx = m_pos - event.x;
        m_pos = event.x;
        parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dx) + "px";
        }
        var resize_el = document.getElementById("resize");
        if (resize_el) {
        resize_el.addEventListener("mousedown", function(event) {
            m_pos = event.x;
            document.addEventListener("mousemove", resize, false);
        }, false);
        }
        document.addEventListener("mouseup", function() {
        document.removeEventListener("mousemove", resize, false);
        }, false);
    </script>
    <style>
        #update_panel {
            position: fixed;
            min-width: 420px;
            padding-left: 4px;
            height: 100%;
            top: 0%;
            right: 0;
            background-color: #f0f0f0;
        }
        #resize {
            background-color: #ccc;
            position: absolute;
            left: 0;
            width: 4px;
            height: 100%;
            cursor: w-resize;
        }
    </style>
</head>
<body>
    <div id="update_panel">
        <div id="resize"></div>
    </div>
</body>
</html>

我正在使用XAMPP localhost和Chrome。请帮帮我！


共1个答案

匿名用户

将块代码移动到的末尾。像这样:

<body>
  <div>
    ...
  </div>
  <script>
    ...
  </script>
</body>

应该管用

关于为什么这样做的解释，请参阅此处:我应该把