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处理程序中（这可以从左边的下拉列表中更改），然后你将代码包装在{ {1}}也是。而且您没有从其他下拉列表中选择jQuery，因此window.onload =将无效。

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

使用.style.opacity =使用javascript因某些原因无效

1 个答案: