单击按钮时使用JS应用CSS

时间:2018-04-18 19:14:16

标签: javascript html css

我正在使用一个模式,点击它时应该全屏弹出。 一切都很好,模态弹出全屏但标题(标识+菜单)仍然显示。

我正在尝试使用JS,因此当单击模态时,我想将z-index应用于标题,当单击关闭按钮时,我将应用另一个z-index来修复标题。

要点击的链接是:

<a class="vPlay vPlay-btn clickformodal" href="#modal-our-work-1" data-toggle="modal" data-video="241737557"><img src="/wp-content/uploads/2018/04/play1.png" /></a>

现在JS代码是这样的:

let open = document.selectElementByClassName("clickformodal");
let header = document.selectElementByClassName("mk-header");
let close = document.selectElementByClassName("close");


open.addEventListener('click', function () {
  header.classList.add("headerbefore");
});

close.addEventListener('click', function () {
  header.classList.remove("headerafter");
});

这是将要应用的CSS:

.headerbefore {
   z-index: 1;
 }

.headerafter {
   z-index: 301;
}

这里的问题是它没有做到它应该做的事情,谷歌浏览器在控制台中显示错误,说let open = document.selectElementByClassName("clickformodal");不是一个功能。

我在这里做错了什么?

请帮帮我,这是我试图解决这个问题的2天,直到现在还没有:/

感谢!!!

1 个答案:

答案 0 :(得分:2)

这里有两件事情出错:

  1. 应该是getElementsByClassName,而不是selectElementByClassName

  2. getElementsByClassName返回元素集合时,您需要在其末尾添加[0],例如document.getElementsByClassName("clickformodal")[0]

  3. let open = document.getElementsByClassName("clickformodal")[0];
    let header = document.getElementsByClassName("mk-header")[0];
    let close = document.getElementsByClassName("close")[0];
    
    
    open.addEventListener('click', function () {
      header.classList.add("headerbefore");
    });
    
    close.addEventListener('click', function () {
      header.classList.remove("headerafter");
    });
    

    选项可以是querySelector()而不是

    let open = document.querySelector(".clickformodal");
    let header = document.querySelector(".mk-header");
    let close = document.querySelector(".close");
    
    
    open.addEventListener('click', function () {
      header.classList.add("headerbefore");
    });
    
    close.addEventListener('click', function () {
      header.classList.remove("headerafter");
    });
    

    如果要添加到1以上,请使用querySelectorAll()(此示例假设打开关闭一样多,但只有1 标头< / em>的)

    let open = document.querySelectorAll(".clickformodal");
    let header = document.querySelector(".mk-header");
    let close = document.querySelectorAll(".close");
    
    
    for (var i = 0; i < open.length; i++) {    
       open[i].addEventListener('click', function () {
           header.classList.add("headerbefore");
       });
    }
    
    for (var j=0; j < close.length; j++) {
       close[j].addEventListener('click', function () {
           header.classList.remove("headerbefore");
       });
    }