4

我做了一个菜单，刚才我添加了

<!DOCTYPE html>

文件，并且它停止工作。但是代码仍在运行，仍然会在鼠标悬停时打印到控制台等。我尝试了其他文档类型，它们也破坏了它，它只是保持静态。

可能导致 JavaScript 无法工作的文档类型是怎么回事？

JS：

var total_width = "960";
var slide_width = "182";
var slide_margin = "10";
var expand_width = "374";
var icon_width = "32";
var icon_margin = "15";
var slide_number = "5";

function slideid(i) {
    var m = document.getElementById("slide"+i);
    var l = document.getElementById("slideimg"+i);
    var k = document.getElementById("slidetext"+i);
    var j = document.getElementById("slidediv"+i);
    return [m, l, k, j]
}

function compat() {
    if (window.opera) {
        for (var i=1;i<6;i++) {
            s = slideid(i);
            s[3].style.position="relative";
            s[3].style.bottom="46px";
        }
    }
    if (document.all && !(window.opera)) {
        for (var i=1;i<6;i++) {
            s = slideid(i);
            s[0].style.height="60px";
            s[1].style.display="none";
            var iecontents = s[2].innerHTML;
            s[0].innerHTML=iecontents;
            s[0].style.fontFamily="'astonishedregular',Impact,serif";
            s[0].style.fontSize="40px";
            s[0].style.color="#fff";
            s[0].style.textDecoration="none";
            s[0].style.padding="10px auto";
        }
    }
}

function expand(x) {
    if (document.all && !(window.opera)) {
        return
    }
    var shrink = new Array();
    for (var i=1;i<6;i++) {
        if (i === x) {
            var expander = i;
        }
        else {
            var d = shrink.length;
            shrink[d] = i;
        }
    }
    for (var i=0;i<4;i++) {
        s = slideid(shrink[i]);
        var slide_shrink = ((total_width-(5*slide_margin))-expand_width)/(slide_number-1);
        s[1].style.marginLeft=(slide_shrink-icon_width)/2;
        s[0].style.width=slide_shrink;
        s[2].style.display="none";
        s[3].style.width="0"
    }
    s = slideid(expander);
    s[1].style.marginLeft=icon_margin;
    s[0].style.width=expand_width;
    s[2].style.display="inline-block";
    s[3].style.width=expand_width-icon_width-icon_margin-7;
}

function shrink() {
    if (document.all && !(window.opera)) {
        return
    }
    for (var i=1;i<6;i++) {
        s = slideid(i);
        s[1].style.marginLeft=(slide_width-icon_width)/2;
        s[0].style.width=slide_width;
        s[2].style.display="none";
        s[3].style.width="0";
    }
}

和 HTML：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css" />
    <script src="menu.js"></script>
</head>
<body onload="compat()">

<div id="Menu" onMouseout="shrink()">
    <a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
        <img id="slideimg1" src="home.png" />
        <div id="slidediv1">
            <h2 id="slidetext1">Home</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
        <img id="slideimg2" src="sound.png" />
        <div id="slidediv2">
            <h2 id="slidetext2">Music</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
        <img id="slideimg3" src="blog.png" />
        <div id="slidediv3">
            <h2 id="slidetext3">Blog</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
        <img id="slideimg4" src="note.png" />
        <div id="slidediv4">
            <h2 id="slidetext4">Bio</h2>
        </div>
    </a>
    <a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
        <img id="slideimg5" src="way.png" />
        <div id="slidediv5">
            <h2 id="slidetext5">Links</h2>
        </div>
    </a>
</div>
</body>
4

4 回答 4

11

您需要"px"添加marginLeft和width。设置需要单位的 CSS 样式在没有单位的情况下将无法工作。而且您缺少<html></html>标签。

function expand(x) {
    if (document.all && !(window.opera)) {
        return
    }
    var shrink = new Array();
    for (var i=1;i<6;i++){
        if (i === x) {
            var expander = i;
        }
        else {
            var d = shrink.length;
            shrink[d] = i;
        }
    }
    for (var i=0;i<4;i++){
        s = slideid(shrink[i]);
        var slide_shrink = ((total_width-(5*slide_margin)) - expand_width) / (slide_number-1);
        s[1].style.marginLeft=(slide_shrink-icon_width)/2 +"px";
        s[0].style.width=slide_shrink +"px";
        s[2].style.display="none";
        s[3].style.width="0"
    }
    s = slideid(expander);
    s[1].style.marginLeft=icon_margin +"px";
    s[0].style.width=expand_width + "px";
    s[2].style.display="inline-block";
    s[3].style.width= (expand_width-icon_width-icon_margin-7) +"px";
}

function shrink() {
    if (document.all && !(window.opera)) {
        return
    }
    for (var i=1;i<6;i++){
        s = slideid(i);
        s[1].style.marginLeft=(slide_width-icon_width)/2 +"px";
        s[0].style.width=slide_width + "px";
        s[2].style.display="none";
        s[3].style.width="0";
    }
}
于 2012-12-12T10:03:15.693 回答
2

document.all是微软的东西，没有被标准涵盖（更多在这个其他 Q/A中）。删除所有使用它并document.getElementById根据需要使用它。

我的猜测是，如果您查看 JavaScript 控制台，您会看到与document.all不存在相关的错误，因为虽然您正在测试的任何浏览器都支持它在怪癖模式下，但当您将其切换到标准模式时（通过添加 doctype） ，它停止支持它。

于 2012-12-12T10:03:21.487 回答
1

添加 HTML5 DOCTYPE ( <!DOCTYPE html>) 会将浏览器置于“标准模式”。没有它，浏览器将处于“Quirks 模式”，这本质上是一种 IE5/旧版兼容模式。MDN 提供了有关该主题的更多信息，以及Firefox 中行为差异的列表。

你的脚本最大的问题是使用document.all，这是一个非标准的微软东西。你会想要使用标准的 DOM 东西，比如document.getElementById.

于 2012-12-12T10:04:31.840 回答
0

在关闭正文标记之前包含您的计数脚本，并且不要忘记添加 html 的结束标记

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="menu.js"></script>
</head>
<body onload="compat()">

<div id="Menu" onMouseout="shrink()">
<a href="#" class="slide" id="slide1" onMouseOver="expand(1)">
  <img id="slideimg1" src="home.png" />
<div id="slidediv1">
    <h2 id="slidetext1">Home</h2>
</div>
</a>
<a href="#" class="slide" id="slide2" onMouseOver="expand(2)">
<img id="slideimg2" src="sound.png" />
<div id="slidediv2">
    <h2 id="slidetext2">Music</h2>
</div>
</a>
<a href="#" class="slide" id="slide3" onMouseOver="expand(3)">
<img id="slideimg3" src="blog.png" />
<div id="slidediv3">
    <h2 id="slidetext3">Blog</h2>
</div>
</a>
<a href="#" class="slide" id="slide4" onMouseOver="expand(4)">
<img id="slideimg4" src="note.png" />
<div id="slidediv4">
    <h2 id="slidetext4">Bio</h2>
</div>
</a>
<a href="#" class="slide" id="slide5" onMouseOver="expand(5)">
<img id="slideimg5" src="way.png" />
<div id="slidediv5">
    <h2 id="slidetext5">Links</h2>
</div>
</a>
</div>
</body>
</html>
于 2012-12-12T10:04:35.157 回答