javascript - 如何使用 JavaScript 修改 HTML 元素的不透明度
问题描述
我有一个带有 div 的 html 文件。这个 div 有一个类,其中包含许多样式选项,这些选项设置在单独的 CSS 文件中。我希望在用户提交表单时隐藏并显示此 div。
到目前为止,这就是我所拥有的:
html''''
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> xxxx </title>
<link rel="stylesheet" type="text/css" href="css0.css">
<script>
function y() {
let name = document.getElementById("a").value;
sessionStorage.setItem("user",name);
document.getElementById("select").style.opacity="1";
}
</script>
</head>
<body>
<form>
<input type="text" id="a">
<input type="submit" value="click" onclick="y();">
</form>
<div id="select" class="menu" >
<ul>
<li><a href="html.html">xxxx</a></li>
<li><a href="">O Fenómeno do Apocalypse</a></li>
<li><a href="">O Fenómeno do IMPE</a></li>
<li><a href="">O Fenómeno do RT</a></li>
</ul>
</div>
<style>
</style>
<script src="js.js"></script>
</body>
</html>
css''''
.menu {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
margin: 0 20px;
transition: 0.5s;
}
ul li a {
display: block;
position: relative;
text-decoration: none;
padding: 5px;
font-size: 18px;
font-family: sans-serif;
color:black;
text-transform: uppercase;
}
ul:hover li a {
transform: scale(1.5);
opacity: .2;
filter: blur(5px);
}
ul li a:hover {
transform: scale(2);
opacity: 1;
filter: blur(0);
}
ul li a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: greenyellow;
transition: transform 0.5s;
transform-origin: right;
transform: scaleX(0);
z-index: -1;
}
ul li a:hover::before {
transition: transform 0.5s;
transform-origin: left;
transform: scaleX(1);
}
我希望当用户在表单中插入他的名字并提交函数 y() 运行(我已经检查并运行)并且同时使用类菜单和 id 选择将不透明度更改为 1 以便显示。我不明白为什么 document.getElementById("select").style.opacity="1"; 这没有做任何事情。
解决方案
防止默认();
然后你点击按钮“提交”,你的提交表单,所以你重新加载你的页面。使用preventDefault(); 为了防止这种情况,您可以看到结果。
推荐阅读
- java - 'appletviewer' 不是内部或外部命令、可运行程序或批处理文件
- azure-blob-storage - 如何将数据从 Azure IoT 中心路由到 Blob 和时序见解
- ionic-framework - 带有 Dialogflow v.2 的 Iionic 聊天客户端
- ffmpeg - 如何使用 ffmpeg 从 mp4 文件中删除“原始显示纵横比”?
- c# - 字典的 C# 问题
- swift - 如何在带有 AudioKit 4.6.1 的 AKMIDICallbackInstrument 回调中使用 AKMIDIStatus
- haskell - 组合子和超级组合子有什么区别?
- dart - Dart 构造函数中的大括号有什么作用?
- python - 即时编译为字节码/本机代码
- facebook-graph-api - 如何在 Firebase 云功能中正确执行 axios POST 请求