javascript隱藏測試/圖片
[英]javascript hide test/pictures
問題描述
我用它從抽認卡中隱藏我的答案。 但是，當我啟動網頁時，所有答案都會顯示出來，我必須手動隱藏它們。 啟動或打開網頁時，如何隱藏所有內容。
我需要隱藏答案
function myShowText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'black';
}
function myHideText(id) {
document.querySelector('#' + id + ' .answer').style.color = 'white';
}
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Flashcards VBA </title>
<rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/scripts.js"></script>
<h3> Flashcards </h3>
<p class="question">
The first question
</p>
<div id="bash_start">
<p class="answer">
<img src="image.jpg">
</p>
</div>
</body>
</html>
3 個解決方案
解決方案1
1 2019-02-13 06:09:04
只需添加display: none css中display: none 。
.answer {
border-style: solid;
border-color: #287EC7;
color: white;
display: none;
}
解決方案2
0 2019-02-13 06:31:10
隱藏window.onload上的答案
window.onload=function(){
document.querySelector('.answer').style.visibility = "hidden";
}
window.onload=function(){ document.querySelector('.answer').style.visibility = "hidden"; } function myShowText(id) { document.querySelector('#' + id + ' .answer').style.color = 'black'; } function myHideText(id) { document.querySelector('#' + id + ' .answer').style.color = 'white'; }
.answer { border-style: solid; border-color: #287EC7; color: white; }
<html lang="en"> <body> <script src="js/scripts.js"></script> <h3> Flashcards </h3> <p class="question"> The first question </p> <div id="bash_start"> <p class="answer"> <img src="image.jpg"> </p> </div> </body> </html>
解決方案3
0 2019-02-13 07:20:37
您可以嘗試以下代碼。 hideAnswers（）應該在頁面開始腳本中調用。 然后您可以使用showAnswers（）顯示答案
function hideAnswers(){
var answers = document.getElementsByClassName("answer");
var answer;
for(var i = 0; i <= answers.length-1; i++){
answer = answers[i];
answer.style.visibility = "hidden";
}
}
function showAnswers(){
var answers = document.getElementsByClassName("answer");
var answer;
for(var i = 0; i <= answers.length-1; i++){
answer = answers[i];
answer.style.visibility = "visible";
}
}
Javascript顯示/隱藏圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.