Question

我正在努力学习javascript，特别感兴趣的是将元素从可见变为不可见。我在网上找到了一个教程，当我尝试从我的家庭服务器运行它时，它可以工作。但是，当我把所有奇特的代码剥离到基本的基础时，它就会停止工作。我将代码上传到jsFiddle，但该网站说我的代码完全有效。如果它有效，为什么它不起作用？

可以找到原始教程Here。

有人可以帮我解决这个问题吗？

这是我的jsFiddle

HTML

<button onclick="toggle('box');">Click here to toggle the box!</button>

    <div class="box">I am a Hidden Box!
    </div>

CSS

.box {
    display: none;
    position: absolute;
    top: 200;
    left: 200;
    height: 300px;
    width: 300px;
    overflow: hidden;
    background-color: yellow;
    transition: height 0.3s linear 0s;
}

的Javascript

function toggle(x) {

    var panel = document.getElementByClassName(x);

    if (panel.style.display == "none") {
        panel.style.display = "block";
    }
    else {
        panel.style.display = "none";
    }
}

Answer 1

你有一些错误。

首先，您在onLoad中加载了Javascript窗格，但是您在全局范围内调用它，因此您的功能无法访问。

其次，你拼写错误getElementsByClassName，你没有s。

第三，document.getElementsByClassName()返回一个数组，因此你必须以数组形式访问它。

这有效：

function toggle(x) {
    var panel = document.getElementsByClassName(x)[0];

    if (panel === undefined) {
        return;
    }

    if (panel.style.display != "block") {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
    }
}

http://jsfiddle.net/0kjvwwxk/7/

或者（或者，如果您不必支持旧版本的IE），您可以检查计算样式。

function toggle(x) {
    var panel = document.getElementsByClassName(x)[0];

    if (panel === undefined) {
        return;
    }

    if (getComputedStyle(panel).getPropertyValue("display") != 'block') {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
    }
}

http://jsfiddle.net/0kjvwwxk/10

Answer 2

jsfiddle将你的代码包装在一个闭包中。

不幸的是，这导致您的功能无法从全局范围访问。

您可以通过将函数附加到窗口对象来解决此问题：

http://jsfiddle.net/0kjvwwxk/5/

window.toggle = function(x) { ...

Answer 3

我注意到您的代码中存在两个问题：

您正在尝试获取节点列表，当您使用MM-DD-YY: HH:MM:SS函数时，您将获得一个可以像数组一样使用的节点列表，在您的情况下，您没有选择该列表中的特定节点。
您尝试从文档中的属性触发的功能无效（使用事件属性也被视为不良做法）

以下是我为使您的代码工作所做的工作：

HH:MM:SS

你的HTML：

getElementsByClassName

（注意我将function toggle(x) { var panel = document.getElementsByClassName(x)[0]; if (panel.style.display == "none") { alert("plz"); panel.style.display = "block"; } else { panel.style.display = "none"; } } document.getElementById("myButton").onclick = function(){ toggle("box"); }内联，因为如果是JavaScript，如果它没有设置为内联，<button id="myButton">Click here to toggle the box!</button> <div class="box" style="display:none;">I am a Hidden Box!</div>将被取消，即使它位于单独的样式表中）

http://jsfiddle.net/0kjvwwxk/6/

Answer 4

它的getElementsByClassName不是getElementByClassName，此方法返回一个数组，如果只有具有此类名的元素，则可以使用

var panel = document.getElementsByClassName("box")[0];

[0] 是数组panel中的第一个元素。

示例：

＆＃13;

function toggle() {

    var panel = document.getElementsByClassName("box")[0];

    if (panel.style.display == "none") {
        panel.style.display = "block";
    }
    else {
        panel.style.display = "none";
    }
}

＆＃13;

.box {
    display: none;
    position: absolute;
    top: 200;
    left: 200;
    height: 300px;
    width: 300px;
    overflow: hidden;
    background-color: yellow;
    transition: height 0.3s linear 0s;
}

＆＃13;

<button onclick="toggle();">Click here to toggle the box!</button>

    <div class="box">I am a Hidden Box!
    </div>

＆＃13;

为什么我的“有效”JS代码不起作用？

4 个答案: