Javascript CSS-通过单击按钮显示元素_Javascript_Html_Css

Javascript CSS-通过单击按钮显示元素

javascript html css

Javascript CSS-通过单击按钮显示元素,javascript,html,css,Javascript,Html,Css,在我的例子中，如何使用css通过单击按钮来显示/隐藏图像问题551 更新：我编辑了代码，因此： <head> <script> document.write("<h1>\"Benvenuto nel programma\"</h1>\n<h3>Qui imparerò ad usare JavaScript facendo i problemi di Eulero</h3>");

在我的例子中，如何使用css通过单击按钮来显示/隐藏图像


问题551

更新：

我编辑了代码，因此：

<head>
    <script>
        document.write("<h1>\"Benvenuto nel programma\"</h1>\n<h3>Qui imparerò ad usare JavaScript facendo i problemi di Eulero</h3>");

        function problem(){
            var img = document.getElementById('problemi');
            return img.style.display = img.style.display === 'block' ? 'none' : 'block';
        }

        function problem551(){
            problem();
            .............
        }


    </script>

</head> 

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problemi" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

<style>
    img {....


文档。编写（“Benvenuto nel programma\”\nQui impareròad usare JavaScript facendo i problemi di Eulero”）；
函数问题（）{
var img=document.getElementById（'problemi'）；
返回img.style.display=img.style.display=='block'？'none'：'block'；
}
函数问题551（）{
问题（）；
.............
}
问题551

img{。。。。

但是我总是，当我打开程序的时候，图像会显示出来。我怎么能隐藏它呢

更新：

我找到了解决办法：

<img id="problemi" src="PROBLEM551.png" style="display: none;">

您需要javascript来实现

我在p标签中移动了img，这样我就可以通过id

#p551

来定位它……另一种方法是，给img一个id

函数问题551（）{
image=document.getElementById（“p551”）；
image.style.display='block'；
}

p#p551{
显示：无
}


问题551

为什么不直接使用JavaScript？给img
标记一个id，然后按id删除它
<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problem551" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>


函数问题551（）{
var img=document.getElementById（'img551'）；
img.style.display=img.style.display=='block'？'none'：'block'；
}
问题551

要使用JavaScript设置元素的可见性，我们可以访问图像的样式。display
属性
对HTML文件做一个小修改
<img src="PROBLEM551.png" id="PROBLEM551">

在函数中，如果我们的显示设置为无，则将显示设置为内联（或img版本的可见）
如果“显示”尚未设置或尚未设置为“无”，请将其设置为“无”，这将使元素不可见。
它不会带按钮飞行，但可以使用复选框来处理该问题。复选框甚至可以像按钮一样设置样式（通过标签）
<label class="btn" for="checkbox-example">test</label>
<input id="checkbox-example" type="checkbox" />
<img src="http://placehold.it/100x100" />

如果需要在不使用JavaScript的情况下执行此操作，可以将按钮替换为附加到隐藏复选框的样式类似的
。然后根据是否选中复选框来设置元素的样式

。按钮{
背景：#eee；
边界半径：0.5em；
填充物：0.5em 1em；
边框：1px实心#333；
}
#切换img:checked~img[src=“PROBLEM551.png”]{
显示：无；
}

问题551

这项工作：
您需要使用
rrrr
#问题551：目标{
显示：内联；
}
#问题551{
显示：无；
}
仅使用复选框的html和css解决方案

输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中+img{
显示：无；
}
img{display:block；}
标签{
显示：内联块；
背景：灰色；
边界半径：5px；
填充：10px；
/*在这里设计你的按钮*/
}

问题551

也可以在不使用Javascript的情况下使用隐藏复选框来实现：

label.show{
/*如果需要的话，让它看起来像一个按钮*/
边框：2件纯蓝；
显示：块；
光标：指针；
}
input.show{
/*我们不需要显示实际的复选框*/
显示：无；
}
input.show+*{
/*未选中复选框时，复选框后面的元素将隐藏*/
可见性：隐藏；
}
输入。显示：选中+*{
/*选中复选框时，将显示该元素*/
能见度：可见；
}
img{
/*只是图像的占位符*/
边框：5px纯红；
宽度：300px；
高度：300px；
}

问题551
（单击以显示图像）


var toggle=document.getElementById（“按钮”）；
var content=document.getElementById（“图像”）；
toggle.addEventListener（“单击”，函数（）{
content.style.display=（image.dataset.button^=1）？“块”：“无”；
}，false）；
#图像{
显示：无；
}
问题551
您可以使用
元素、css
:checked
、：not（：checked）
、相邻同级选择器、+
选择器、：before
切换img
显示
属性

输入{
外观：按钮；
-webkit外观：按钮；
-moz外观：按钮；
宽度：100px；
高度：30px；
显示：块；
}
输入：之前{
内容：“问题551”；
位置：相对位置；
左：12px；
顶部：8px；
}
输入：选中+img{
显示：无；
}
输入：未（：选中）+img{
显示：块；
}


在css中没有解决方案。
CSS代表层叠样式表。它只是给你的页面提供样式。它不起显示/隐藏的作用
层叠样式表（CSS）是一种向Web文档添加样式（例如字体、颜色、间距）的简单机制

试着自己去做，这样你就可以学会
为此，必须使用javascript或jquery。
我将推荐jquery。
我希望你能理解。
你需要Javascript来实现这一点，你做了什么？这是Javascript上最简单的任务…我认为CSS中没有显示/隐藏选项。通过这个链接-在Javascript中，向img标记添加display:none，我建议通过给img标记一个id来实现。有一个show（）/hide（）jQuery中的方法（这是一个库构建
<body>
    <script>
        function problem551() {
            var img = document.getElementById('img551');
            img.style.display = img.style.display === 'block' ? 'none' : 'block'; 
        }
    </script>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img src="PROBLEM551.png" id="img551">
        <p id="p551"></p>
    </div>
</body>

<img src="PROBLEM551.png" id="PROBLEM551">

function problem551(){
    if(document.getElementById("PROBLEM551").style.display === "none"){
        document.getElementById("PROBLEM551").style.display = "inline"
    }else{
        document.getElementById("PROBLEM551").style.display = "none";
    }
}

<label class="btn" for="checkbox-example">test</label>
<input id="checkbox-example" type="checkbox" />
<img src="http://placehold.it/100x100" />

label {
  background: rgba( 0, 0, 0, 0.1);
  border: 1px solid #999;
  border-radius: 4px;
  padding: 6px 12px;
}
input[type="checkbox"] {
  display: none;
  &:checked + img {
    display: none;
  }
}

 <div>
        <a id="aa" onclick="problem551()" href="#problen551" >PROBLEM 551</a>
        <img src="PROBLEM551.png" id="problen551">
        <p id="p551">rrrr</p>
    </div>




#problen551:target{
   display:inline;
}
#problen551 {
  display:none;
}