JQuery切换div透明度报错：Uncaught TypeError: Cannot read property 'opacity' of undefined

你碰到的这个Uncaught TypeError: Cannot read property 'opacity' of undefined报错，核心原因很明确——你把jQuery对象当成原生DOM元素来操作了。$("#taskinput")返回的是jQuery封装后的对象，它并没有.style这个属性，只有原生DOM元素才自带.style属性。另外还有个细节误区：CSS里的opacity取值范围是0到1（不是你写的100），不管用原生JS还是jQuery，都得遵循这个数值范围来控制透明度。

下面给你两种可行的解决办法，按需选择：

方法1：把jQuery对象转为原生DOM元素 #

你可以通过[0]或者.get(0)的方式，把jQuery对象转换成原生DOM元素，这样就能正常使用.style属性了：

$(document).ready(function(){ 
  $("#addtask").click( function() { 
    // 将jQuery对象转为原生DOM元素
    const taskInputEl = $("#taskinput")[0];
    if (taskInputEl.style.opacity === "1") { 
      taskInputEl.style.opacity = "0"; 
    } else if (taskInputEl.style.opacity === "0") { 
      taskInputEl.style.opacity = "1"; 
    } 
  }); 
});

不过这种方式有个小局限：.style只能获取行内样式，如果你的opacity是通过外部CSS文件或者<style>标签设置的，就没法通过它获取到当前值，这时候更推荐用jQuery自带的方法。

方法2：使用jQuery的.css()方法（更推荐） #

jQuery专门提供了.css()方法来获取和设置元素样式，它能识别行内、内嵌、外部样式表的样式，用法也更灵活：

$(document).ready(function(){ 
  $("#addtask").click( function() { 
    const $taskInput = $("#taskinput");
    // 获取当前透明度并转为数字，方便判断
    const currentOpacity = parseFloat($taskInput.css("opacity"));
    if (currentOpacity === 1) { 
      $taskInput.css("opacity", 0); 
    } else { 
      $taskInput.css("opacity", 1); 
    } 
  }); 
});

如果你的需求只是点击切换元素的显示/隐藏透明效果，甚至可以用jQuery的.fadeToggle()方法一行代码搞定，它还自带过渡动画：

$(document).ready(function(){ 
  $("#addtask").click( function() { 
    $("#taskinput").fadeToggle();
  }); 
});

内容的提问来源于stack exchange，提问作者Tom Thomson