Div Margin-top不变？

Question

我有一个菜单式的div，我想滑下来。我还喜欢菜单div（内容div）下方div的margin-top向下，这样当margin margin扩展时，content div会更接近margin div的边缘。这是我的剧本：

<script type="text/javascript">
var charter = document.getElementById("charter");
var main = document.getElementById("main");
var height = charter.style.height | 100;
var mMargin = main.style.marginTop | 80;

charter.onmouseover = down;
charter.onmouseout = up;

function down() {
    if (height < 200) {
        height += 10;
        mMargin -= 10;
        charter.style.height = height + "px";
        margin.style.marginTop = mMargin + "px";
        setTimeout (down, 20);
    }
}

function up() {
    if (height > 100) {
        height -= 10;
        charter.style.height = height + "px";
        setTimeout (up, 20);
    }
}
</script>

页面加载，当鼠标悬停在div上时没有任何反应。我检查了错误日志，第一个错误是：Uncaught TypeError：无法读取属性＆＃39; style＆＃39;为null。接下来是一堆无法加载资源：net :: ERR_FAILED，然后在最后找不到Widget配置。也许它与我定义mMargin的方式有关？我可能应该使用与marginTop不同的东西，但我不知道它是什么。