Javascript：特定屏幕尺寸的removeChild

Question

我正在尝试几个小时，在某个屏幕尺寸（> 60em和<90em）处围绕两个div（旁边和.related）添加一个包装器。 我正在使用matchMedia和eventListener这样做。 包装似乎是在正确的位置添加的，但问题是它仍然存在，即使不满足大小的条件。

这是一个jsfiddle： http ： //jsfiddle.net/Vanilla__/4q26ngmg/1/

简化的HTML：

<body>
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <div class="related">Related</div>
  <footer>Footer</footer>
</body>

使用Javascript：

if(window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) {

  window.addEventListener("resize", function addWrapper(q) {

  //Create div with id wrapper
  var div = document.createElement('div');
  div.id = "wrapper";

  // Select aside
  var selectDiv = document.querySelector("aside");

  //clone
  div.appendChild(selectDiv.cloneNode(true));
  //Place the new wrapper at the right place in the HTML
   selectDiv.parentNode.replaceChild(div, selectDiv);

  //Add related to the wrapper so they're both in the wrapper
  document.querySelector('#wrapper').appendChild(
    document.querySelector('.related') );

  });
}

我想添加一个'else'来删除子（使用removeChild）或删除eventListener（使用removeEventListener），当有另一个屏幕大小时，但我得到的是关于函数未定义的错误或其他错误，无论我尝试什么。

else {
       window.removeEventListener("resize", addWrapper(q));
    }

有没有人知道当屏幕尺寸不是> 60em和<90em时如何删除包装？ 我是一个Javascript新手（可能很清楚;））。 任何帮助表示赞赏。

Answer 1

你可以这样做：

 var addWrapper = function () { //Don't add wrapper if already added var wrapper = document.getElementById("wrapper"); if (wrapper !== null) return; //Create div with id wrapper var div = document.createElement('div'); div.id = "wrapper"; // Select aside var selectDiv = document.querySelector("aside"); //clone div.appendChild(selectDiv.cloneNode(true)); //Place the new wrapper at the right place in the HTML selectDiv.parentNode.replaceChild(div, selectDiv); //Add related to the wrapper so they're both in the wrapper document.querySelector('#wrapper').appendChild( document.querySelector('.related')); }; var removeWrapper = function () { //Don't remove if there is no wrapper var wrapper = document.getElementById("wrapper"); if (wrapper === null) return; //Replace wrapper with its content wrapper.outerHTML = wrapper.innerHTML; } var wrapperFixer = function () { if (window.matchMedia("screen and (min-width: 60em) and (max-width: 90em)").matches) { addWrapper(); } else { removeWrapper(); } } window.onload = function () { window.addEventListener("resize", wrapperFixer); //Check and add if wrapper should be added on load wrapperFixer(); }

 body { display: flex; height: 40em; flex-wrap: wrap; font-family: Helvetica, Arial, sans-serif; color: white; text-align: center; } header { background-color: purple; width: 30% } main { background-color: pink; width: 40% } aside { background-color: deepPink; width: 15% } .related { background-color: red; width: 15% } footer { background-color: slateBlue; width: 100%; height: 5em; } #wrapper { border: 4px solid white; }

 <body> <header>Header</header> <main>Main</main> <aside>Aside</aside> <div class="related">Related</div> <footer>Footer</footer> </body>

Javascript：特定屏幕尺寸的removeChild

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-24 14:02:48

Javascript：特定屏幕尺寸的removeChild

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-24 14:02:48

解决方案1
1 已采纳 2015-10-24 14:02:48