Question

function sg() {
    x = document.getElementById("cai");
    g = x.style.display;
    if (g == "none") {
        g == "block"
    } else {
        g == "none"
    };
}
window.onload = zmena;

function zmena() {
    document.getElementById("matek").onclick = sg;
}

为什么这个脚本不起作用

Answer 1

首先，你不能像这样给变量赋值：'g ==“block”'。这是一个逻辑操作，而不是一个任务。其次，你可以使用短格式将所有if else东西包装在一个字符串中，如下所示：

function sg() {
    x = document.getElementById("cai");
    x.style.display = x.style.display == 'block' ? 'none' : 'block'
}

Answer 2

g == "block"和g == "none"是比较运算符而不是赋值运算符。

使用=而不是==并引用节点而不是显示属性的值：

function sg() {
    x = document.getElementById("cai");
    g = x.style.display;
    if (g == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    };
}

演示：http://jsfiddle.net/LNd2g/

更好的编码方式：

function sg () {
    var _element = document.getElementById('cai'), 
        _display = _element.style.display;

    _element.display = (_display === 'none') ? 'block' : 'none';
}

Answer 3

请注意，要更改元素的样式，您应该x.style.display = "block"。剩下的代码似乎没问题。

这似乎是你需要的：

function sg() {
    var x = document.getElementById("cai");
    var g = x.style.display;

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

window.onload = function () {
    document.getElementById("matek").onclick = sg;
};

Answer 4

我确定脚本正在完全按照您的要求去做，但也许不是您期望它做的事情。

第一个问题，如前所述，==是比较运算符，而不是赋值运算符。事实上，在大多数情况下使用==时，它被视为不良风格，您应该使用===进行javascript中的比较。

第二个问题，假设您打算使用asignment运算符，您可以将变量g修改为＆＃34; block＆＃34;或＆＃34;无＆＃34;，但这不会产生任何影响x的风格。此外，您应该使用var关键字声明您的本地变量，您可以通过它们创建两个全局变量x和g。

另外，我怀疑你不应该依赖x.style.display none，有很多可能性。有更可靠的方法来确定元素是否可见。

无论如何，你可能想要这样的东西：

function sg() {
    var x = document.getElementById('cai');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

通过点击更改显示

4 个答案: