Question

美好的一天，

我想使用一个脚本，使我的CSS属性从display：none变为display：initial。

这是我写的脚本：

    function setVisibleLP(){

    if(document.getElementById('arrow_first').style.display == "none")
    {
        document.getElementById('arrow_first').style.display = "initial";
    } else {
        document.getElementById('arrow_first').style.display = "none";
        }
    if(document.getElementById('arrow_second').style.display == "none")
    {
        document.getElementById('arrow_second').style.display = "initial";
    } else {
        document.getElementById('arrow_second').style.display = "none";}
}

在CSS文件中，ID显示属性默认设置为NONE。要运行脚本，我在HTML中有一个按钮输入，用onclick事件激活脚本。

问题：功能不起作用。它是通过输入按钮在HTML上调用的，带有onclick事件，如下所示：

<input type="button" value="show me around" onclick="setVisibleLP()" />

HTML idS：

    <a id="goPos1" href="#"><img id="arrow_first" src="img/icons/arrow1.png" /></a>
    <a id="goPos2" href="#"><img id="arrow_second" src="img/icons/arrow1.png" /></a>

上述ID的CSS：

#arrow_first{
    display: none;
    height: 20px;
    width: 70px;
    position: absolute;
    bottom: -5%;
    left: 9%;
    z-index: 1;
    border: 0;
    margin: 0;
    padding: 0;
    transform:rotate(-13deg);
    -ms-transform:rotate(-13deg); /* IE 9 */
    -webkit-transform:rotate(-13deg); /* Opera, Chrome, and Safari */
}
#arrow_second{
    display: none;
    height: 30px;
    width: 50px;
    position: absolute;
    bottom: -11%;
    left: 74%;
    z-index: 1;
    border: 0;
    margin: 0;
    padding: 0;
    transform:rotate(-29deg);
    -ms-transform:rotate(-29deg); /* IE 9 */
    -webkit-transform:rotate(-29deg); /* Opera, Chrome, and Safari */

Answer 1

首先，您可以简化代码：

function toggleVisible(el) {
    el.style.display = el.style.display=="none" ? "initial" : "none";
}
function setVisibleLP(){
    toggleVisible(document.getElementById('arrow_first'));
    toggleVisible(document.getElementById('arrow_second'));
}

然后，问题可能是style属性只包含内联样式，而不是样式表中定义的样式。因此，您可能必须使用getComputedStyle：

function toggleVisible(el) {
    el.style.display = window.getComputedStyle(el, null).display == "none"
      ? "initial" : "none";
}

另一个可能的问题是你有!important个样式覆盖内联样式。然后，使用

function toggleVisible(el) {
    el.style.setProperty(
        "display",
        window.getComputedStyle(el, null).display == "none"  ? "initial" : "none",
        "important"
    );
}

jScript和CSS属性

1 个答案: