CSS-单击按钮显示元素
[英]CSS - Show element by clicking button
问题描述
如何通过使用CSS单击按钮来显示或隐藏图像（在我的情况下为PROBLEM 551 ）？
<body>
<div>
<button onclick="problem551()" >PROBLEM 551</button>
<img src="PROBLEM551.png">
<p id="p551"></p>
</div>
</body>
更新：
我编辑了代码，这是：
<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 {....
但是我总是，当我打开程序时，显示的图像是...如何隐藏它？
更新：
我找到了解决方案：
<img id="problemi" src="PROBLEM551.png" style="display: none;">
12 个解决方案
解决方案1
4 2016-10-31 15:20:12
仅HTML和CSS解决方案使用复选框。
input[type=checkbox]{ display:none; } input[type=checkbox]:checked + img{ display:none; } img{display:block;} label{ display:inline-block; background: gray; border-radius: 5px; padding:10px; /* Style your button here */ }
<body> <div> <label for="problem551">problem551</label> <input type="checkbox" id="problem551"> <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"> <p id="p551"></p> </div> </body>
解决方案2
3 2016-10-31 15:20:48
也可以使用隐藏的复选框，而无需使用Javascript来实现：
label.show { /* make it look like a button if needed */ border: 2px solid blue; display: block; cursor: pointer; } input.show { /* we don't need to display the actual checkbox */ display: none; } input.show + * { /* the element after the checkbox will be hidden when the checkbox is not checked */ visibility: hidden; } input.show:checked + * { /* the element will be shown when the checkbox is checked */ visibility: visible; } img { /* just a placeholder for the image */ border: 5px solid red; width: 300px; height: 300px; }
<div> <label for="problem551" class="show"> problem 551<br>(click to show image) </label> <input type="checkbox" class="show" name="problem551" id="problem551"> <img src="PROBLEM551.png"> <p id="p551"></p> </div>
解决方案3
1 2016-10-31 15:14:04
为什么不只使用JavaScript？ 给img标签指定一个ID。 然后按ID删除它。
<body>
<div>
<button onclick="problem551()" >PROBLEM 551</button>
<img id="problem551" src="PROBLEM551.png">
<p id="p551"></p>
</div>
</body>
JavaScript：
function problem551() {
var element = document.getElementById("problem551");
element.parentNode.removeChild(element);
};
解决方案4
1 2016-10-31 15:15:34
它不会随按钮一起飞行，但是可以使用复选框来处理。 该复选框甚至可以像按钮一样（通过标签）设置样式。
<label class="btn" for="checkbox-example">test</label>
<input id="checkbox-example" type="checkbox" />
<img src="http://placehold.it/100x100" />
与以下CSS：
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;
}
}
解决方案5
1 2016-10-31 15:16:42
如果您需要在没有JavaScript的情况下执行此操作，则可以将按钮替换为隐藏在复选框前的类似样式的<label> 。 然后根据是否选中该复选框设置元素的样式。
.button { background: #eee; border-radius: 0.5em; padding: 0.5em 1em; border: 1px solid #333; } #toggle-img:checked ~ img[src="PROBLEM551.png"] { display: none; }
<div> <input type="checkbox" id="toggle-img" style="display:none"> <label onclick="problem551()" class="button" for="toggle-img">PROBLEM 551</label> <img src="PROBLEM551.png"> <p id="p551"></p> </div>
解决方案6
1 2016-10-31 15:19:03
这有效： 纯CSS JSFiddle
您将需要使用<a>但是您可以对其进行样式设置使其看起来和感觉像一个按钮
<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;
}
解决方案7
1 2016-10-31 15:45:49
您可以使用<input type="checkbox">元素， css :checked ， :not(:checked) ，相邻的同级选择器+选择器:before来切换img display属性
input { appearance: button; -webkit-appearance: button; -moz-appearance: button; width: 100px; height: 30px; display: block; } input:before { content: "Problem 551"; position: relative; left: 12px; top: 8px; } input:checked + img { display: none; } input:not(:checked) + img { display: block; }
<body> <div> <input type="checkbox" /> <img id="img" src="http://placehold.it/300x150?text=551"> <p id="p551"></p> </div> </body>
解决方案8
0 2016-10-31 15:11:48
您需要使用javascript。
我将img移到了p标签中，因此我可以将其定位为ID #p551 ...另一种方法是给img一个ID
function problem551(){ image = document.getElementById("p551"); image.style.display = 'block'; }
p#p551{ display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div> <button onclick="problem551()" >PROBLEM 551</button> <p id="p551"><img src="PROBLEM551.png"></p> </div> </body>
我使用了jquery，因为它更容易...告诉我，如果那不是选择...
更新
我将其更改为纯JavaScript ...
解决方案9
0 已采纳 2016-10-31 15:14:30
<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>
解决方案10
0 2016-10-31 15:14:48
要使用JavaScript设置元素的可见性，我们可以访问图像的style.display属性。
对您的HTML文件进行少量修改...
<img src="PROBLEM551.png" id="PROBLEM551">
在我们的JavaScript中，我们可以声明以下函数...
function problem551(){
if(document.getElementById("PROBLEM551").style.display === "none"){
document.getElementById("PROBLEM551").style.display = "inline"
}else{
document.getElementById("PROBLEM551").style.display = "none";
}
}
在函数中，如果我们的显示设置为无，则将显示设置为嵌入式（或img的可见版本）。
如果显示尚未设置或尚未设置，则将其设置为none，这将使元素不可见。
解决方案11
0 2016-10-31 15:34:15
var toggle = document.getElementById("button"); var content = document.getElementById("image"); toggle.addEventListener("click", function(){ content.style.display = (image.dataset.button ^= 1) ? "block" : "none"; }, false);
#image{ display:none; }
<button id="button">PROBLEM 551</button> <div id="image"><img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div>
解决方案12
0 2016-10-31 15:53:40
您对此没有解决方案。 CSS代表级联样式表，它只是为页面提供样式，不具有show are / hide的功能。
级联样式表（CSS）是一种向Web文档添加样式（例如，字体，颜色，间距）的简单机制。
尝试自己做，以便您可以学习。
为此，您必须使用javascript或jquery。 我会推荐jQuery的。 希望您能理解。
单击该元素时，在textarea中显示具有id的元素的CSS规则
[英]Show CSS rules of an element with an id in a textarea when clicking on that element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.