如何使用javascript动态更改元素的不透明度答案

【问题标题】：How to change the opacity on an element dynamically using javascript如何使用javascript动态更改元素的不透明度
【发布时间】：2015-01-25 18:37:24
【问题描述】：

我做了一个改变元素不透明度的函数，但你知道它不起作用，下面是我的代码：

   function _opacity(ele, opacity,addOpac , delay ){
    ele = document.getElementById(ele);
    var CurrentOpacity = ele.style.opacity,
        ChangeInOpacity = setInterval(function(){
            if (CurrentOpacity > opacity ) { decrease();};
            if (CurrentOpacity < opacity) { increase();};
            if (CurrentOpacity == opacity) { stopInc();};

            }, delay),

        increase = function(){
            ele.style.opacity = CurrentOpacity;
            CurrentOpacity = CurrentOpacity+addOpac;
        },

        decrease =function(){
            ele.style.opacity = CurrentOpacity;
            CurrentOpacity = CurrentOpacity-addOpac;

        },
        stopInc = function(){
            clearInterval(ChangeInOpacity);
        };
}

这个函数最重要的特点之一是不使用任何循环。

这种使用setInterval 的思想在改变元素的宽度和高度方面非常有效。但是这里这个功能不起作用。

我所知道的是它没有向传递给上述函数的元素添加任何样式属性

这里的错误是什么导致这不起作用？

提前致谢。

【问题讨论】：

在指定样式之前不应该加或减addOpac吗？
谢谢.. 但是这个简单的解决方案是如何使这个功能起作用的？？？
元素是否真的应用了不透明样式？ ele.style 只访问内联样式，而不是来自 CSS 的样式。
您是否意识到style.opacity 的值是一个字符串，而不是一个数字。在您设置它之前，它最初也可能根本不存在。
您可以将此评论作为答案发布，我会接受它

标签： javascript opacity

【解决方案1】：

你可以这样做：

ele.style.opacity = "0.2";// some desired value but string if for all browsers.

有关更多信息，请参阅此帖子：Setting opacity of html elements in different browsers

【讨论】：

【解决方案2】：

这里有几个问题：

要获取元素的当前不透明度，需要使用getComputedStyle 函数（或oldIE 上的currentStyle 属性），而不是.style.opacity。后者只有在显式分配而不是通过样式表隐式分配时才具有值。
该值将是一个字符串，因此您需要将其转换为数字。
您不太可能完全匹配目标不透明度，因此您需要在越过目标时停下来。
您不要将; 放在if 语句的末尾，因此请删除它们。
您分配不透明度，然后增加它，然后您检查增加的值是否已完成，所以即使不是#3，您也会提前停止.
在 JavaScript 中，压倒性的约定是以小写字母开头的局部变量名称。我把你的定时器句柄的名字改成了timer。

你最好的办法是弄清楚你要去的方向，然后在你通过目标时停下来：

// Polyfill getComputedStyle for old IE
if (!window.getComputedStyle) {
  window.getComputedStyle = function(element) {
    return element.currentStyle;
  }
}

// Your _opacity function
function _opacity(ele, opacity, addOpac, delay) {
  var direction;
  ele = document.getElementById(ele);
  
  // Determine direction
  direction = +getComputedStyle(ele).opacity < opacity ? 1 : -1;
  var timer = setInterval(function() {
    // Get the *computed* opacity
    var current = +getComputedStyle(ele).opacity;
    if (direction > 0) {
      if (current < opacity) {
        increase(current);
      } else {
        stopInc();
      }
    }
    else {
      if (current > opacity) {
        decrease(current);
      } else {
        stopInc();
      }
    }

  }, delay),

  increase = function(current) {
    // Increase, but don't go past target
    ele.style.opacity = Math.min(current + addOpac, opacity);
  },

  decrease = function(current) {
        
    // Decrease, but don't go past target
    ele.style.opacity = Math.max(current - addOpac, opacity);

  },
  stopInc = function() {
    clearInterval(timer);
  };
};

// Run
_opacity("target", 0.3, 0.05, 50);

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div id="target">this is the element</div>

【讨论】：