将text.innerHTML修改为显示/隐藏脚本中的图像

Modify text.innerHTML to an image in show/hide script

本文关键字：脚本 隐藏 图像 显示 text innerHTML 修改      更新时间：2023-09-26

我最近得到了这个简单的脚本来显示/隐藏html页面的几个部分。我使用它通过单击小"+"和"-"来显示/隐藏div 的内容：

    function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "+";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "-";
    }
}

以及：

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>

代码工作正常，但我正在尝试将"+"和"-"文本链接更改为图像链接。我对Javascript知之甚少，我尝试了各种修改，使它变得最糟糕。此原始脚本位于外部.js文件中。

关于如何将文本链接更改为图像链接的任何想法？

谢谢

您的 id 值未正确关闭。因此，document.getElementById("displayText1")是不确定的。所以试试这个

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">

而不是你的 

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>

希望这有帮助...

如果我理解正确，您可以提前制作图像链接，然后将它们附加到之前"+"和"-"所在的元素中：

var showControlImage = new Image(),
    hideControlImage = new Image();
showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";
// Then just use your toggle function with minor changes:
function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "";
        text.appendChild = showControlImage;
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "";
        text.appendChild = hideControlImage;
    }
}

此外，您应该按照钱丹的建议清理您的标签。

相关文章：