Question

我每次调用函数

时都试图改变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()"/>

但它不起作用，有人可以帮我错吗？

Answer 1

for循环的条件和递增部分都是错误的。增加i的正确方法是说i+=0.1而不是i+1。此外，您的条件i==a表示您的循环仅在i等于a时执行，但如果您希望循环执行直到i达到1，您应该尝试此< / p>

 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更改div的不透明度

1 个答案: