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

How to change the opacity on an element dynamically using javascript

本文关键字：元素 不透明度 何使用 javascript 动态      更新时间：2023-09-26

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

   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的思想在改变元素的宽度和高度方面非常有效。但是在这里，此功能不起作用。

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

这里的错误是什么，因为它不起作用？

提前谢谢。

那里有几个问题：

  1. 要获取元素的当前不透明度，您需要使用 getComputedStyle 函数（或 oldIE 上的 currentStyle 属性），而不是 .style.opacity 。后者只有在显式分配时才具有值，而不是通过样式表隐式分配。

  2. 该值将是一个字符串，因此您需要将其转换为数字。

  3. 您不太可能完全匹配目标不透明度，因此您需要在越过目标时停止。

  4. 您不会;放在语句if末尾，因此请将其删除。

    5. 您

  5. 分配不透明度，但随后递增它，然后递增的值是您检查的值以查看您是否已完成，因此即使不是 #3，您也会提前停止。

  6. 在 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>

你可以这样做：

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

有关更多信息，请参阅这篇文章：在不同浏览器中设置 HTML 元素的不透明度

相关文章：