gpt4 book ai didi

javascript - 使用javascript改变div的不透明度

转载 作者:行者123 更新时间:2023-12-03 10:04:30 29 4
gpt4 key购买 nike

我每次调用函数时都尝试更改 div 元素的不透明度

<div id="dv" style="width:200px; height: 20px; background-color: blueviolet; opacity: 0.5; ">
<script>
function opt(){
var d = document.getElementById("dv").style.opacity;
var a = parseFloat(d);
for(var i=0.5; i == a; i+0.1){
if(i==1){

break;
d = document.getElementById("dv").style.opacity = i;

}
}
}
</script>
<input type="submit" value="submit" onclick="opt()"/>

但它不起作用,有人可以帮助我解决错误吗?

最佳答案

for 循环的条件和递增部分都是错误的。增加 i 的正确方法是使用 i+=0.1 而不是 i+1。另外,您的条件 i==a 意味着您的循环只会在 i 等于 a 时执行,但是如果您希望循环执行到i 达到 1 你应该尝试这个

 for(var i=0.5; i <= 1; i+=0.1){
document.getElementById("dv").style.opacity = i;
}

编辑:

此外,使用 CSS 过渡来进行淡入/淡出要容易得多。这是您的代码的示例

<html>
<head>
<!-- Your other head nodes -->
<style>
#dv {
width:200px;
height: 20px;
background-color: blueviolet;
opacity: 0.5;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
</style>
</head>
<body>
<div id="dv"></div>
<script type="text/javascript">
function opt(){
document.getElementById("dv").style.opacity = 1;
}
</script>

<input type="submit" value="submit" onclick="opt()">
</body>

关于javascript - 使用javascript改变div的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30423079/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com