Javascript隐藏元素并放置其他内容

Javascript hide element(s) and put something else in place

本文关键字：其他 隐藏 元素 Javascript      更新时间：2024-01-18

我有一个小问题。

对于我们必须用Javascript完成的任务，我需要一些帮助。

我们有一个文本和一些单词，我们给出一个id（html）。在javascript中，我们必须创建一个函数，当它被点击时，所有带有id的单词都将不可见。我知道，我也能做到。但还有一件事。如果我们把这个词看不见，它必须变得清楚，以前有一个词在那里！如果你能理解的话，它看起来就像是一个填充文本。

现在我有了这个：

function toggle_woordjes() {
var e = document.getElementsByClassName('invul');
for(i = 0; i < e.length; i++){
    if (e[i].style.display !== ''){
        e[i].style.display = '';
    }
    else {
        e[i].style.display = 'block';
    }

}

}

代码不再正常工作，因为我对它做了太多更改，无法恢复到原来的状态。

我希望你们能帮助我。

对不起，我的英语不是最好的！

干杯

如果父对象的背景只有1种颜色（既没有设计也没有图案），则可以编写如下内容。

object.style.backgroundColor="same color as parent"

然而，如果背景更复杂：

function toggle_words() {
    var doms = document.getElementsByClassName('class_name');
    for (var i = 0; i < doms.length; ++i) {
        var domStyle = doms[i].style;
        if (domStyle.visibility === 'visible') {
            domStyle.visibility = 'hidden';
        }
        else {
            domStyle.visibility = 'visible';
        }
    }
}

我使用可见性而不是显示，因为元素留在DOM中，因此用户知道以前有一些东西。

首先，我认为您需要将其设为e[i].style.display = 'none';，而不是空字符串，以便使它们消失（并相应地更改测试）。

但这听起来并不是你真正的问题，而是显示文本来表明那里有一个元素。我建议有一个类为invul的<div>，它包含另外两个<div>元素：1是真实内容不可见时要显示的文本，另一个是真实内容。类似这样的东西：

<div class="invul">
    <div class="msg">Word was here</div>
    <div class="word">I am the real message</div>
</div>

然后根据需要使它们消失并重新出现。

相关文章：