使用.style.opacity =使用javascript不工作由于某种原因

Question

我是新来javascript和jquery，我试图让一个视频的不透明度改变，当我把鼠标悬停在li项目上。我知道'onmouseover'的作品，因为我已经使用相同的jQuery来测试我用来滚动到页面的顶部onclick。

该问题似乎是检查和更新视频div的风格不起作用的语法。我从codeacademy的教训适应的代码，不明白为什么它的工作：

window.onload = function() { 

    // Get the array of the li elements  
    var vidlink = document.getElementsByClassName('video'); 

    // Get the iframe 
    var framecss = document.getElementsByClassName('videoplayer1'); 

    // Loop through LI ELEMENTS 
    for (var i = 0; i < vidlink.length; i++) { 
     // mouseover function: 
     vidlink[i].onmouseover = function() { 
      //this doesn't work: 
      if (framecss.style.opacity === "0.1") { 
       framecss.style.opacity = "0.5"; 
      } 
     }; 
     //onclick function to scroll to the top when clicked: 
     vidlink[i].onclick = function() { 
      $("html, body").animate({ 
       scrollTop: 0 
      }, 600); 
     }; 
    } 
}; 

这里是一个的jsfiddle你可以看到HTML和CSS：

http://jsfiddle.net/m00sh00/CsyJY/11/

好像这样一个简单的问题，所以我很抱歉，如果我失去了明显的东西。

任何帮助深表感谢

Answer 1

试试这个：

vidlink[i].onmouseover = function() { 
     if (framecss[0].style.opacity === "0.1") { 
      framecss[0].style.opacity = "0.5"; 
     } 
    }; 

或者：

var framecss = document.getElementsByClassName('videoplayer1')[0]; 

或者，更好的，给的iframe的ID，并使用document.getElementById()。

getElementsByClassName()函数返回一个列表，不是一个单一的元素。该列表没有style属性。在你的情况下，你知道列表中应该有一个项目，你可以通过[0]索引访问。

或者，因为你正在使用jQuery，你可以重写它是这样的：

$(document).ready(function(){ 
    // Get the iframe 
    var $framecss = $('.videoplayer1'); 

    $('.video').on({ 
     mouseover: function() { 
      if ($framecss.css('opacity') < 0.15) { 
       $framecss.css('opacity', 0.5); 
      } 
     }, 
     click: function() { 
      $("html, body").animate({ 
       scrollTop: 0 
      }, 600); 
     } 
    }); 
}); 

注意，我测试，如果不透明度小于0.15，因为当我尝试了一下在你的提琴它返回为0.10000000149011612而不是0.1。

另外，请注意，您的小提琴中的代码没有运行，因为默认情况下，jsfiddle会将您的JS放入onload处理程序中（可以从左侧的下拉列表中更改），然后您将代码封装在还有window.onload =。而你没有从另一个下拉列表中选择jQuery，所以.animate()将无法​​工作。

这里有一个更新的小提琴：http://jsfiddle.net/CsyJY/23/

[不透明和不确定的风格在accesing JS元素时，但在定义的CSS（中