javascript覆盖css显示：无可见隐藏

我有一个CSS id，既隐藏可见性又显示：无。当我点击按钮时，我想让它显示出来。但是，我能让它工作的唯一方法是移除显示器：无。我不想要这个，因为它是一个无形的元素，导致设计混乱

最终的目标是点击按钮，使一些元素消失，一些元素出现

这是HTML

<div class="fwork1" id="fwork1">

    <a href="#portfolio" onclick="fWork1()">
        <img src="assets/img/portfolio/corinthmc/corinthmc_small.png" alt=""> 
    </a>

</div>

<div id="hwork1">

    <p>some text</p>

</div>

<div id="fWorkReturn">

    <button onclick="fWorkReturn()">Click</button>

</div>

下面是Javascript

function fWork1() {
    document.getElementById("fwork2").style.display = "none";
    document.getElementById("fwork3").style.display = "none";
    document.getElementById("fwork4").style.display = "none";
    document.getElementById("hwork1").style.display = "block"; 
}

function fWorkReturn() {
    document.getElementById("fwork1").style.display = "initial";
    document.getElementById("fwork2").style.display = "initial";
    document.getElementById("fwork3").style.display = "initial";
    document.getElementById("fwork4").style.display = "initial";
    document.getElementById("hwork1").style.visibility = "hidden";
}

---

处理此问题的最佳方法是在单击元素时添加一个类。您的js将如下所示：

function fWork1() {
    document.getElementById("fwork2").classList().add('active');
}

#hwork1 {
    display: none;
}

#hwork1.active {
    display: block;
}

您的CSS将如下所示：

function fWork1() {
    document.getElementById("fwork2").classList().add('active');
}

#hwork1 {
    display: none;
}

#hwork1.active {
    display: block;
}

---

像这样更改代码-

函数隐藏（）{
document.getElementById（“fwork2”）.style.visibility=“”；
document.getElementById（“fwork3”）.style.visibility=“”；
document.getElementById（“fwork4”）.style.visibility=“”；
document.getElementById（“hwork1”）.style.visibility=“”；
}
函数show（）{
document.getElementById（“fwork1”）.style.visibility=“hidden”；
document.getElementById（“fwork2”）.style.visibility=“hidden”；
document.getElementById（“fwork3”）.style.visibility=“hidden”；
document.getElementById（“fwork4”）.style.visibility=“hidden”；
document.getElementById（“hwork1”）.style.visibility=“hidden”；
}

这是使用JavaScript更改元素可见性的方法。当前代码在调用函数/单击按钮时更改某些元素的可见性属性。如何在另一个上下文中应用这一点应该相当简单

函数hideforandshowSix（）{
设four=document.getElementById（'four'）；
设six=document.getElementById（'six'）；
style.setProperty（'visibility'，'visible'）；
style.setProperty（'display'，'list item'）；
style.setProperty（'visibility'，'hidden'）；
}

#六{
可见性：隐藏；
显示：无；
}

一个
两个
三
四个
五
六个

隐藏4号和显示6号

显示：可见

无效<代码>显示：阻止和可见性：可见将起作用。抱歉，我可能理解有点慢。我在id=“hwork1”中添加了class=“active”，然后添加了JS-函数fWork1（）{document.getElementById（“fwork2”）.classList（）.add（'active'）；}不理解fwork2在这个实例中的用途。当我使用display:block时，它在物理上不可见，但在设计中却造成了中断。我确实使用了visibility:visible，它看起来是隐藏的，但我还是无法在单击时看到它。我仍然没有运气。hwork1仍未显示。您的

onclick=（）

按钮似乎不起作用。在html文件中添加此脚本时，您应该会得到所需的内容。同时将onclick函数更改为active（），这将起作用：

函数active（）{if（document.getElementById（“hwork1”）.classList.contains（'active'））{document.getElementById（“hwork1”）.classList.remove（'active'）；}否则{document.getElementById（“hwork1”）.classList.add（'active'）；}

@skylarwuebker如何将其反转。它似乎可以工作，但我需要将其反转回显示：无-单击另一个按钮时隐藏。您在单击时隐藏了可见性，而它已经从css中隐藏。@SRGSPRINKES删除了不需要的css代码，但这些仍然可以解决设计混乱的问题。您所说的完全有道理，但基本上这就是我已经在做的。我可以制作我想要的元素。我甚至可以把它们带回来。我的问题是，我在CSS中有一个隐藏的元素，我不想使用可见性来显示：隐藏；显示：无；-单击按钮时，我要显示的元素不显示。如何覆盖显示：js中无？@tmoflash您必须将

display

属性设置为它应该的值（通常

inline

，

block

，

inline block

，但还有更多）。不幸的是，你必须知道使用哪一个。（除非您可以在分配给隐藏元素的类中添加初始的

display:none

。然后您可以使用JavaScript删除该类并再次获取默认值）