WebCat: 使用JavaScript隐藏input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
*{
padding:0;
margin:5px;
}
body{
background:#000;
}
video{
aspect-ratio:9/16;
transform:translateZ(0px) rotateZ(0deg);
animation: fg 8000ms infinite linear;
margin-left:1px;
}
@keyframes fg {
0%{
transform: rotateY(0deg) rotateX(0deg);
}
<p>6.875%{
transform: rotateY(-180deg) rotateX(180deg);
}
31.875%{
transform: rotateY(-180deg) rotateX(180deg);
}
36%{
transform: rotateY(0deg) rotateX(0deg);
}</p>
<p>56.85%{
transform: rotateY(0deg) rotateX(0deg);
}
61%{
transform: rotateY(180deg) rotateX(-180deg);
}
81.875%{
transform: rotateY(180deg) rotateX(-180deg);
}
86%{
transform: rotateY(0deg) rotateX(0deg);
}
100%{
transform: rotateY(0deg) rotateX(0deg);
}
}
</style></p>
</head>
<body>
<input type="file" id="inp" class="np"/>
<video src="" autoplay="" muted="" width="100%" loop="" id="video"></video>
<script>
// 隐藏input元素
document.getElementById("inp").style.display = "none";
<p>// 或者使用class选择器
document.getElementsByClassName("np")[0].style.display = "none";</p>
<p>inp.onchange = function(){
var file = inp.files[0];
var reader = new FileReader();
reader.onload = (e) =>{
video.src = <code>${e.target.result}</code>;
video.muted = false;
document.getElementsByClassName("np").style.display="none";
}
reader.readAsDataURL(file);
}
</script></p>
</body>
</html>
js让input元素怎么隐藏内容：要让input元素隐藏，可以使用CSS的display属性设置为none。在JavaScript中，通过获取元素的class或id，然后设置其style.display为'none'即可隐藏元素。
<p>例如，在上述代码中，可以将隐藏input元素的代码修改为：</p>
<pre><code class="language-javascript">document.getElementById("inp").style.display = "none";
</code></pre>
<p>或者使用class选择器：</p>
<pre><code class="language-javascript">document.getElementsByClassName("np")[0].style.display = "none";
</code></pre>
原文地址: https://www.cveoy.top/t/topic/qi1T 著作权归作者所有。请勿转载和采集!