javascript - 根据响应图像更改蒙版高度

Question

在第一次加载和每次调整窗口大小时尝试将响应图像的高度复制到我的蒙版时遇到问题。我已经尝试了一些 js 脚本，但仍然无法实现。

它实际上是一个响应式图像 slider ，无论视口(viewport)屏幕大小如何，它上面都有一个 div( mask )。

这是我的 jQuery 脚本:

function maskInit(){
   var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
   $("#mask").height() = offsetDots;  
}
$(document).ready(function() {
maskInit(); 
});
$(window).resize(function(){
    maskInit();
});

和我的 CSS:

#slide{
    height: 10vw; /* to simulate a responsive image */
    width: 100%;
    margin: 0;
    padding: 0;
    background: red;
    z-index: 0;
}
#mask{    
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    background: gray;
    opacity: 0.8;
}

I've setup a jsFiddle here to simulate my problem

Answer 1

你的脚本有问题。

您不是用这个设置 mask 高度:

$("#mask").height() = offsetDots;

检查 jQuery .height()

而是这样使用它:

$("#mask").height(offsetDots);

或者你可以通过css设置:

$("#mask").css({"height":offsetDots});

Here's your updated jsFIDDLE demo